说明:以下内容是基于w3school及饥人谷教学内容,对HTML表单元素做的简单说明。
<form> 元素
<form> 元素定义 HTML 表单区间,而这个区间的数据将会被提交给后台。
例子:
<input type="textarea"/> 请输入留言
<br/>
<form action="/abc">
<input type="password"/> 请输入密码
<br/>
<input type="submit"/>
</form>
结果是form标签内的数据,password才会被提交,而textarea的内容不会被提交。
<input> 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态,根据不同的 type 属性有以下类型:
序号 | 类型 | 描述 |
---|---|---|
1 | text | 用于文本输入的单行输入字段,默认宽度20字符。 |
2 | password | 密码输入框,密码会自动显示为 ● |
3 | checkbox | 用于创建多选/复选框 |
4 | radio | 用于创建单选框 |
5 | file | 用于上传文件, accept属性可以限制文件上传类型。 |
6 | hidden | 这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话,就是用这种类型的元素。 |
7 | button | 用于创建一个按钮,显示名称为value属性的值 |
8 | submit | 用于创建一个提交按钮,显示名称为value属性的值 |
9 | reset | 当重置按钮被点击,包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML value 属性或 JavaScript 的 defaultValue 属性指定。 |
其他标签
1、<label>标签
label标签本身不会产生任何特殊效果,但是可以用于改进用户可用性及体验性,当设置label的for=“某个元素的id”时,点击label标签的内容,会自动focus到该标签。
如下例,当我们点击<b>输入密码</b>几个文本时,当前页面会自动focus到password的输入框,而不必点击该输入框。
<input type="password" id="ps"/>
<label for="ps">请输入密码</label>
2、<textarea>标签
用于创建一个可以指定宽高的文本输入框,内容长度不限。可以通过cols和rows属性控制宽高,但是兼容性不好,原因见下记网址详细分析。
http://www.zhangxinxu.com/wordpress/2016/02/html-textarea-rows-height/
<textarea name="" id="" cols="30" rows="10">this is a example</textarea>
3、<select>标签
select 元素可创建单选或多选菜单,菜单选项为<option>标签。
<select name="city" id="city">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="tianjin" selected>天津</option>
</select>