\
元素HTML 表单用于收集用户输入。
元素定义 HTML 表单: 实例 . form elements .HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。 元素
元素是最重要的表单元素。
元素有很多形态,根据不同的 type 属性。
这是本章中使用的类型: 类型 描述 text 定义常规文本输入。 radio 定义单选按钮输入(选择多个选择之一) submit 定义提交按钮(提交表单)
注释:您稍后将在本教程学到更多有关输入类型的知识。 文本输入
定义用于文本输入的单行输入字段: 实例
First name: Last name:元素
最重要的表单元素是 元素。
元素根据不同的 type 属性,可以变化为多种形态。
注释:下一章讲解所有 HTML 输入类型。 元素(下拉列表)
元素定义下拉列表: 实例
Volvo Saab Fiat Audi亲自试一试
元素定义待选择的选项。列表通常会把首个选项显示为被选选项。
您能够通过添加 selected 属性来定义预定义选项。 实例
Fiat亲自试一试 元素
元素定义多行输入字段(文本域): 实例
The cat was playing in the garden.亲自试一试
以上 HTML 代码在浏览器中显示为:
The cat was playing in the garden.
元素
元素定义可点击的按钮: 实例
Click Me!
亲自试一试
以上 HTML 代码在浏览器中显示为: HTML5 表单元素
HTML5 增加了如下表单元素:
<datalist> <keygen> <output>注释:默认地,浏览器不会显示未知元素。新元素不会破坏您的页面。 HTML5 元素
元素为 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
元素的 list 属性必须引用 元素的 id 属性。 实例
通过 设置预定义值的 元素:
输入类型:text
定义供文本输入的单行输入字段: 实例
First name: Last name:亲自试一试
以上 HTML 代码在浏览器中看上去是这样的: First name:
Last name: 输入类型:password
定义密码字段: 实例
User name: User password:亲自试一试
以上 HTML 代码在浏览器中看上去是这样的: User name:
User password:
注释:password 字段中的字符会被做掩码处理(显示为星号或实心圆)。 输入类型:submit
定义提交表单数据至表单处理程序的按钮。
表单处理程序(form-handler)通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序(form-handler): 实例
First name: Last name:亲自试一试
以上 HTML 代码在浏览器中看上去是这样的: First name:
Last name:
如果您省略了提交按钮的 value 属性,那么该按钮将获得默认文本: 实例
First name: Last name:亲自试一试 Input Type: radio
定义单选按钮。
Radio buttons let a user select ONLY ONE of a limited number of choices: 实例
Male Female亲自试一试
以上 HTML 代码在浏览器中看上去是这样的: Male
Female Input Type: checkbox
定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。 实例
I have a bike I have a car亲自试一试
以上 HTML 代码在浏览器中看上去是这样的: I have a bike
I have a car Input Type: button
<input type="button> 定义按钮。 实例
亲自试一试
以上 HTML 代码在浏览器中看上去是这样的: HTML5 输入类型
HTML5 增加了多个新的输入类型:
color date datetime datetime-local email month number range search tel time url week注释:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。 输入类型:number
用于应该包含数字值的输入字段。
您能够对数字做出限制。
根据浏览器支持,限制可应用到输入字段。 实例
Quantity (between 1 and 5):亲自试一试 输入限制
这里列出了一些常用的输入限制(其中一些是 HTML5 中新增的): 属性 描述 disabled 规定输入字段应该被禁用。 max 规定输入字段的最大值。 maxlength 规定输入字段的最大字符数。 min 规定输入字段的最小值。 pattern 规定通过其检查输入值的正则表达式。 readonly 规定输入字段为只读(无法修改)。 required 规定输入字段是必需的(必需填写)。 size 规定输入字段的宽度(以字符计)。 step 规定输入字段的合法数字间隔。 value 规定输入字段的默认值。
您将在下一章学到更多有关输入限制的知识。 实例
Quantity:亲自试一试 输入类型:date
用于应该包含日期的输入字段。
根据浏览器支持,日期选择器会出现输入字段中。 实例
Birthday:亲自试一试
您可以向输入添加限制: 实例
Enter a date before 1980-01-01: Enter a date after 2000-01-01:亲自试一试 输入类型:color
用于应该包含颜色的输入字段。
根据浏览器支持,颜色选择器会出现输入字段中。 实例
Select your favorite color:亲自试一试 输入类型:range
用于应该包含一定范围内的值的输入字段。
根据浏览器支持,输入字段能够显示为滑块控件。 实例
亲自试一试
您能够使用如下属性来规定限制:min、max、step、value。 输入类型:month
允许用户选择月份和年份。
根据浏览器支持,日期选择器会出现输入字段中。 实例
Birthday (month and year):亲自试一试 输入类型:week
允许用户选择周和年。
根据浏览器支持,日期选择器会出现输入字段中。 实例
Select a week:亲自试一试 输入类型:time
允许用户选择时间(无时区)。
根据浏览器支持,时间选择器会出现输入字段中。 实例
Select a time:亲自试一试 输入类型:datetime
允许用户选择日期和时间(有时区)。
根据浏览器支持,日期选择器会出现输入字段中。 实例
Birthday (date and time):亲自试一试 输入类型:datetime-local
允许用户选择日期和时间(无时区)。
根据浏览器支持,日期选择器会出现输入字段中。 实例
Birthday (date and time):亲自试一试 输入类型:email
用于应该包含电子邮件地址的输入字段。
根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。
某些智能手机会识别 email 类型,并在键盘增加 “.com” 以匹配电子邮件输入。 实例
E-mail:亲自试一试 输入类型:search
用于搜索字段(搜索字段的表现类似常规文本字段)。 实例
Search Google:亲自试一试 输入类型:tel
用于应该包含电话号码的输入字段。
目前只有 Safari 8 支持 tel 类型。 实例
Telephone:亲自试一试 输入类型:url
用于应该包含 URL 地址的输入字段。
根据浏览器支持,在提交时能够自动验证 url 字段。
某些智能手机识别 url 类型,并向键盘添加 “.com” 以匹配 url 输入。 实例
Add your homepage:亲自试一试
HTML 表单元素 HTML 输入属性VUE 进阶教程 HTML 参考手册 HTML 实例 HTML 测验