本文介绍关于form表单的一些使用方法
网站是如何与用户进行交互的？使用HTML表单。表单用于搜集不同类型的用户输入。
表单元素
<form> 元素定义HTML表单：
<form>
--form elements--
</form>
HTML表单包含表单元素
<form>元素中可以包含：<button>, <datalist>, <fieldset>, <input>, <keygen>, <label>, <legend>, <meter>, <menus>, <optgroup>, <output>, <progress>, <select>, <textarea>等表单元素。
<input>元素
<input>元素是最重要的表单元素。
<input>元素需要定义type，name，value或者checked，其中，每个输入字段必须设置一个name属性，checked属性用于设置按钮的预选项。
type属性：规定input元素的类型，可设置值如下：
输入类型：text
<input type="text"> 定义用于文本输入的单行输入字段。
<form>
姓名：<input type="text" name="name"><br>
班级：<input type="text" name="class">
</form>
注：文本字段的默认宽度是 20 个字符。
输入类型：password
<input type="password"> 定义密码字段。
<form>
用户名：<input type="text" name="username"><br>
密码：<input type="password" name"pw">
</form>
输入类型：radio
<input type="radio"> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一：
<form>
<input type="radio" name="sex" value="male" checked>男<br>
<input type="radio" name="sex" value="female">女
</form>
输入类型：submit
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序是在表单的 action 属性中指定：
<form action=" ">
姓名：<input type="text" name="name"><br>
班级：<input type="text" name="class">
<input type="submit" value="提交">
</form>
输入类型：checkbox
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
<form>
<p>我喜欢的运动</p>
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="run" checked>跑步 //默认选中
</form>
输入类型：button
<input type="button"> 定义按钮。
<input type="button" onclick="alert(' 我是左冬!')" value="我是谁">
输入类型：number
<input type="number"> 用于应该包含数字值的输入字段。
<form>
<input type="number" name="quantity" min="1" max="5"> //数量（1 到 5 之间）
<input type="submit" value="提交">
</form>
注释：IE9 及早期版本不支持 type="number"。
输入类型：date
<input type="date"> 用于应该包含日期的输入字段。
根据浏览器支持，日期选择器会出现输入字段中。
<form>
生日：<input type="date" name="birthday">
<input type="submit" value="提交">
</form>
注释：IE11及更早期版本不支持 type="date".
添加输入限制的代码
<form>
1980-01-01以前
<input type="date" name="bday" max="1979-12-31"><br>
2000-01-01以后
<input type="date" name="bday" min="2000-01-02"><br>
</form>
输入类型：color
<input type="color"> 用于包含颜色的输入字段。
根据浏览器支持，颜色选择器会出现输入字段中。
<form action=" ">
选择你最喜欢的颜色:
<input type="color" name="favcolor" value="#ff0000">
<input type="提交">
</form>
输入类型：range
<input type="range"> 用于包含一定范围内的值的输入字段。
根据浏览器支持，输入字段能够显示为滑块的控件。
<form action=" " method="get">
音量:
<input type="range" name="spearker" min="0" max="10">
<input type="确定">
</form>
注释：IE9 及早期版本不支持 type="range"。
输入类型：email
<input type="email"> 用于应该包含电子邮件地址的输入字段。
根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
某些只能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。
<form>
E-mail:
<input type="email" name="email">
<input type="submit">
</form>
注释：IE9 及早期版本不支持 type="email"。
输入类型：search
<input type="search"> 用于搜索字段。
<form action=" ">
搜索谷歌：
<input type="search" name="googlesearch">
<input type="submit">
</form>
输入类型：tel
<input type="tel"> 用于应该包含电话号码的输入字段。
目前只有 Safari 8支持 tel 类型。
<form action=" ">
Telephone:
<input type="tel" name="usrtel">
<input type="submit">
</form>
注释：Safari 8 及更新版本支持 type="tel"
输入类型：url
<input type="url"> 用于应该包含URL地址的输入字段。
根据浏览器支持，在提交时能够自动验证URL字段。
某些智能手机识别URL类型，并向键盘添加 ".com" 以匹配URL输入。
<form action=" ">
请添加您的首页：
<input type="url" name="homepage">
<input type="submit">
</form>
注释：IE9 及其更早版本不支持 type="url"。
其他<input>属性：
name：定义input元素的名称。
value：规定字段的初始值。
readonly：规定输入字段只读。
disabled：规定输入字段是禁用的，被禁用的元素是不可用不可点击不可提交。
size：规定输入字段的尺寸，如果size="5"，那么一行中可输入无数个字符但一行中只有5个可见字符。
maxlength：规定输入字段允许的最大长度，如果maxlength="5"，那么一行中最多可输入5个字符。
placeholder：规定帮助用户填写输入字段的提示（样本值或有关格式的简短描述），该提示会在用户输入值之前显示在输入字段中。
list：引用包含输入字段的与定义选项的datalist。
src：定义以提交按钮形式显示的图像的URL。
step：规定input元素的合法数字间隔，如果step="3"，则合法数字应该是-3、0、3、6等。只能是3的整倍数。可与max以及min属性一同使用，来创建合法值的范围。
<select> 元素（下拉列表）
<select>元素定义下拉列表，<option>元素定义下拉列表的选项，列表通常会把首个选项显示为被选选项，但可以通过selected定义预定义选项。
<select name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange" selected>Orange</option> //默认选中
</select>
<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项，通过添加 selected 属性来定义预定义选项。
<textarea> 元素定义多行输入字段（文本域）
【rows="10" cols="30"】的意思是定义一个30个字符宽，10行高的文本区。
<textarea name="message" rows="10" cols="30">
The car was playing in the garden.
</textarea>
<button> 元素
<button>元素定义可点击的按钮，请示中为按钮规定type属性。如果在HTML表单中使用button元素，不同的浏览器会提交不同的值。IE将提交<button>与<button/>之间的文本，而其他浏览器将提交value属性的内容。应用<input>元素创建按钮。
<button type="button" onclick="alert("Hello World!")">点我</button>
HTML5 表单元素
HTML5 增加了如下表单元素：
- <datalist>
- <keygen>
- <output>
HTML5 <datalist> 元素
<datalist>元素为<input>元素规定预定义选项列表。
<datalist>为<input>预定义选项列表，起到提示作用。用户会在他们输入数据时看到预定义选项的下拉列表。
<input>元素的list属性必须引用<datalist>元素的id属性。
<form action=" ">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
常用属性
-
action属性制订了某个服务器脚本来处理被提交的表单，如果省略action属性，则action会被设置为当前页面。 -
method属性规定了提交表单的http方法，默认GET，GET最适合少量数据且不需要保密的提交，使用GET时表单数据在页面地址栏中是可见的。设置为POST，安全性更加，因为在页面地址栏中被提交的数据不可见。 -
target属性值是一个名字或关键字，规定在哪里打开新页面，默认_self，一般设置为_blank。- _self：在当前HTML4或HTML5文档页面重新加载返回值（默认值）。注：如果这个文档在一个frame中，self是在当前frame(document)中重新加载的，而不是整个页面(window)。
- _blank：以新的HTML4或HTML5文档窗口加载返回值。
- _parent：在父级的frame中以HTML4或HTML5文档形式加载返回值，如果没有父级的frame，行为和_self一致。
- _top：如果是HTML4文档，清空当前文档，加载返回内容；如果是HTML5文档，在当前文档的最高级内加载返回值，如果没有父级，和_self行为一致。
- iframename：返回值在指定frame中加载。
表单的作用
HTML<form>元素表示了文档中的一个区域，这个区域包含有交互控制元件，用来像web服务器提交信息。
输入限制
| 属性 | 描述 |
|---|---|
| disabled | 规定输入字段应该被禁用 |
| max | 规定输入字段的最大值 |
| maxlength | 规定输入字段的最大字符 |
| min | 规定输入字段的最小值 |
| pattern | 规定通过其检查输入值的正则表达式 |
| readonly | 规定输入字段为只读（无法修改） |
| required | 规定输入字段是必须的（必须填写） |
| size | 规定输入字段的宽度（以字符计） |
| step | 规定输入字段的合法数字间隔 |
| value | 规定输入字段的默认值 |
注：属性制订了某个服务器脚本来处理被提交的表单，如果省略action属性，则action会被设置为当前页面。
网友评论