HTML5——input

介绍

　　<input  type="" name=""  value="">

 

作用

　　输入标签，收集用户数据

 

属性

　　宽度：自适应

　　高度：自适应

　　type：

　　　　text（单行文本标签）

　　　　password（密码标签）

　　　　submit（提交按钮）

　　　　button（普通按钮）

　　　　radio（单选框）

　　　　checkbox（复选框）

　　　　file（文件上传）

　　placeholder：提示信息

　　required：必须要求填入的属性

 

注意（老师要求）

　　输入标签必须有 type，name属性！或者无法传递标签内数据。

　

使用

　　

<form method="get" action="http://www.baidu.com" style="width: 380px; margin: 0px auto;">
                <div>
                    <span>用户名：</span>
                    <input type="text" name="username" placeholder="请输入用户名" required="required" />
                    <input type="button"  value="检查用户名" />
                </div>
                <div>
                    <span>密码：</span>
                    <input type="password" name="password" placeholder="请输入密码" required="required"/>
                </div>
                <div>
                    <span>确认密码：</span>
                    <input type="password" placeholder="请确认密码" required="required"/>
                </div>
                <div>
                    <span>区域</span>
                    <select name="userprov">
                        <option value="sichuan">四川省</option>
                        <option value="hunan">湖南省</option>
                        <option value="guangdong">广东省</option>
                    </select>
                </div>
                <div>
                    <span>性别：</span>
                    <input type="radio" name="usergender" value="boy" />男
                    <input type="radio" name="usergender" value="girl" />女
                </div>
                <div>
                    <span>年龄：</span>
                    <input type="number" name="userage" value="20" min="20" max="30" step="1" />
                </div>
                <div>
                    <span>生日：</span>
                    <input type="date" name="userdate" required="required" />
                </div>
                <div>
                    <span>手机号：</span>
                    <input type="tel" name="usertel" required="required" />
                </div>
                <div>
                    <span>头像：</span>
                    <input type="url" name="userphoto"  />
                </div>
                <div>
                    <span>主页：</span>
                    <input type="url" name="userurl" required="required" />
                </div>
                <div>
                    <span>Email：</span>
                    <input type="email" name="useremail" required="required" />
                </div>
                <div>
                    <span>喜欢的颜色：</span>
                    <input type="color" name="userbackgroundcolor" />
                </div>
                <div>
                    <input type="checkbox" name="useragree" />同意服务条款
                </div>
                <div>
                    <input type="submit" value="提交" />
                </div>
            </form>

 

重点

　　此布局的重点，不在于<input>的使用，而是整个页面的布局。

　　HTML5采用<div>独占一行的特性，做到垂直线型布局。而<div>内采用水平布局让页面能适配