<input>标签用于搜集用户信息。
根据不同的type属性值,输入字段拥有很多形式。输入字段可以是文本字段,复选框,源码后的文本控件,单选按钮,按钮等等
注意:并不是所有的主流浏览器都支持新的input类型
Text fields(文本域)
text fields主要用于用户输入文本,如下所示:
<!DOCTYPE html>
<html>
<body>
<form>
<label for="">姓名:</label>
<input type="text" placeholder="请输入你的名字哦" class="two"/>
</form>
</body>
</html>
Password(密码域)
password主要用于用户输入密码,如下所示:
<!DOCTYPE html>
<html>
<body>
<form>
<label for="">密码:</label>
<input type="password" placeholder="请输入你的名字哦"/>
</form></body>
</html>
Checkbox(复选框)
checkbox主要用于用户可以选中或取消选取复选框,如下所示:
<!DOCTYPE html>
<html>
<body>
<form>
<label for="">你喜欢什么车:</label>
我喜欢自行车:
<input type="checkbox" name="Bike"/>
<br/>
我喜欢汽车
<input type="checkbox" name="Car"/>
</form>
</body>
</html>
Radio(单选框)
radio主要用于用户创建单选按钮,如下所示:
<!DOCTYPE html>
<html>
<body>
<form>
<label for="">你的性别:</label>
男性:
<input type="radio" checked="checked" name="Sex" value="male"/>
<br/>
女性:
<input type="radio" checked="checked" name="Sex" value="female"/>
<br/></form>
</body>
</html>
Select(下拉列表)
select主要用于用户创建下拉列表框,下拉列表是一个可选列表,如下所示:
<!DOCTYPE html>
<html>
<body>
<form>
<label for="">所属学院:
<input type="text" list="country"/>
<datalist id="country">
<option value="中软大学"></option>
<option value="武汉大学"></option>
<option value="南开大学"></option>
<option value="深圳大学"></option>
<option value="电大"></option>
<option value="中山大学"></option>
</datalist>
</label>
</form>
</body>
</html>
Textarea(文本域)
textarea主要用于用户创建一个文本域(多行文本输入控制),在文域中,用户输入不限字数,如下所示:
<!DOCTYPE html>
<html>
<body>
<form>
<textarea rows="10" cols="30">
本人性格开朗,就不能不讲究个初稿初稿。比划比划笔记本,半年不见你看。
</form>
</body>
</html>
Button(创建按钮)
button主要用于用户创建按钮,用户可以在按钮上定义,如下所示:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" value="提交!">
<input type="button" value="重置!">
</form>
</body>
</html>
color(颜色选择)
color主要用于用户选取颜色,如下所示:
<!DOCTYPE html>
<html>
<body>
<form>
<label for="">选择你喜欢的颜色::</label>
<input type="submit">
</form>
</body>
</html>
Date(日期)
date主要用于用户从一个日期选择器选择一个日期,如下所示:
<!DOCTYPE html>
<html>
<body>
<form>
<label for="">入学日期:
<input type="date" />
</label>
</form>
</body>
</html>
Datetime(日期)
datetime主要用于用户选择一个日期,如下所示:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="datetime" name="bdaytime">
<input type="submit">
</label></form>
</body>
</html>
Datetime-local(日期)
datetime-local主要用于用户选择一个日期和时间(无时区),如下所示:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="submit">
</label></form>
</body>
</html>
Email(邮箱)
datetime-local主要用于用户e-mail地址(无时区的输入域),如下所示:
<html>
<body>
<form>
<input type="email" placeholder="请输入邮箱"/>
</label>
</form>
</body>
</html>
Number(数字)
month主要用于用户数值的输入域,如下所示:
<html>
<body>
<form>
</label>
</form>
</body>
</html>
Range(滑动条)
range主要用于用户输入包含一定范围内数字值的输入域,如下所示:
<html>
<body>
<form>
<input type="range" name="points" min="1" max="10">
<input type="submit">name="quantity" min="1" max="5">
</label>
</form>
</body>
</html>
注意:Internet Explorer 9 及更早IE版本不支持 type="range"。
Search(搜索域)
search主要用于用户搜索域,比如站点搜索。
<html>
<body>
<form>
<input type="search" name="googlesearch" value="cxc"><br>
<input type="submit">
</label>
</form>
</body>
</html>
Tex(电话号码)
tex主要用于用户电话号码的输入。
<html>
<body>
<form>
<input type="submit">
</label>
</form>
</body>
</html>
Url(地址的输入域)
url主要用于应该包含url地址的输入域,在提交表单时,会自动验证url域的值,如下所示:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="submit"> <input type="datetime-local name="bdaytime"" name="bdaytime">
<input type="submit">
</label></form>
</body>
</html>
注意: Internet Explorer 9及更早IE版本不支持 type="url"
Url(地址的输入域)
Progress(课程进度)
progress主要用于用户课程的进度条,如下所示:
<html>
<body>
<form>
<progress value="20" max="100"></progress>
</label>
</form>
</body>
</html>
Metter(尺度)
metter主要用于已知范围或分数值内的标量测量,不应用于指示进度。如果标记进度条,请使用<progress>,如下所示:
<html>
<body>
<form>
<meter id="baseId" min="10" max="100" value="60" low="60" high="80"></meter>
</label>
</form>
</body>
</html>
</form>
</body>
</html>