input类型详解

来源：互联网发布：ubuntu搭建hadoop 编辑：程序博客网时间：2024/06/05 19:11

<input>标签用于搜集用户信息。

根据不同的type属性值，输入字段拥有很多形式。输入字段可以是文本字段，复选框，源码后的文本控件，单选按钮，按钮等等

注意:并不是所有的主流浏览器都支持新的input类型

Text fields(文本域)

text fields主要用于用户输入文本，如下所示：

<!DOCTYPE html>
<html>
<body>

<form>

</form>
</body>
</html>

Password（密码域)

password主要用于用户输入密码，如下所示：

<!DOCTYPE html>
<html>
<body>

<form>

</form>
</body>
</html>

Checkbox（复选框)

checkbox主要用于用户可以选中或取消选取复选框，如下所示：

<!DOCTYPE html>
<html>
<body>

<form>

<label for="">你喜欢什么车：</label>

我喜欢自行车：

<br/>

我喜欢汽车

</form>
</body>
</html>

Radio（单选框)

radio主要用于用户创建单选按钮，如下所示：

<!DOCTYPE html>
<html>
<body>

<form>

<label for="">你的性别：</label>
男性：

<br/>
女性：

Select（下拉列表)

select主要用于用户创建下拉列表框，下拉列表是一个可选列表，如下所示：

<!DOCTYPE html>
<html>
<body>

<form>

Textarea（文本域)

textarea主要用于用户创建一个文本域（多行文本输入控制），在文域中，用户输入不限字数，如下所示：

<!DOCTYPE html>
<html>
<body>

<form>

本人性格开朗，就不能不讲究个初稿初稿。比划比划笔记本，半年不见你看。

</form>
</body>
</html>

Button（创建按钮)

button主要用于用户创建按钮，用户可以在按钮上定义，如下所示：

<!DOCTYPE html>
<html>
<body>

<form>

</form>
</body>
</html>

color（颜色选择)

color主要用于用户选取颜色，如下所示：

<!DOCTYPE html>
<html>
<body>

<form>

<label for="">选择你喜欢的颜色:：</label>

</form>
</body>
</html>

Date（日期)

date主要用于用户从一个日期选择器选择一个日期，如下所示：

<!DOCTYPE html>
<html>
<body>

<form>

</form>
</body>
</html>

Datetime（日期)

datetime主要用于用户选择一个日期，如下所示：

<!DOCTYPE html>
<html>
<body>

<form>

<label for="">生日 (日期和时间):

Datetime-local（日期)

datetime-local主要用于用户选择一个日期和时间（无时区），如下所示：

<!DOCTYPE html>
<html>
<body>

<form>

<label for="">生日 (日期和时间):<input type="datetime-local name="bdaytime"" name="bdaytime">
<input type="submit">
</label></form>
</body>
</html>

Email（邮箱)

datetime-local主要用于用户e-mail地址（无时区的输入域），如下所示：
<html>
<body>

<form>

</form>
</body>
</html>

Number（数字)

month主要用于用户数值的输入域，如下所示：
<html>
<body>

<form>

Range（滑动条)

range主要用于用户输入包含一定范围内数字值的输入域，如下所示：

<form>

<label for="">年龄:

<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主要用于用户搜索域,比如站点搜索。

<form>

<label for="">搜索:

Tex（电话号码)

tex主要用于用户电话号码的输入。

<form>

</label>
</form>
</body>
</html>

Url（地址的输入域)

url主要用于应该包含url地址的输入域，在提交表单时，会自动验证url域的值，如下所示：

<!DOCTYPE html>
<html>
<body>

<form>

添加你的主页: <input type="url" name="homepage"><br>
<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主要用于用户课程的进度条，如下所示：

<form>

Metter(尺度)

metter主要用于已知范围或分数值内的标量测量，不应用于指示进度。如果标记进度条，请使用<progress>，如下所示：

<form>

</form>
</body>
</html>

0 0