前端开发学习笔记–HTML 表单元素

发布于 2018-04-02  270 次阅读


表单元素用于获取用户的输入数据,提供各种可供用户输入的表单控件,常用表单元素如下:

form 表示 HTML 表单
input 表示用来收集用户输入数据的控件
textarea 表示可以输入多行文本的控件
select 表示用来提供一组固定的选项
option 表示提供提供一个选项
optgroup 表示一组相关的 option 元素
button 表示可用来提交或重置的表单按钮(或一般按钮)
datalist 定义一组提供给用户的建议值
fieldset 表示一组表单元素
legend 表示 fieldset 元素的说明性标签
label 表示表单元素的说明标签
output 表示计算结果

1:<form>元素定义表单,主要是定义本身是一种表单,以下是 form 表单下的元素表单:

元素名称 说明
action 表示表单提交的页面
method 表示表单的请求方式
enctype 表示浏览器对发送给服务器的数据所采用的编码格式
name 设置表单名称,用于程序调用
target 设置提交时的目标位置
autocomplete 设置浏览器记住用户输入的数据,实现自动完成表单
novalidate 设置是否执行客户端数据有效性检查

析:<method>元素的请求方式有两种'post'和'get',默认'get';<target>元素提交目标的位置有'_blank','_parent','_self','_top';<autocomplete>元素默认是'on',反之,不想设置自动完成则设置'off'

例:

<form  method="post" action="https://www.itwordsweb.com" target="_blank" autocomplete="on">
	 	用户名:<input name="user">
	 	<button>提交</button>
</form>

2:<input>元素表示用户输入数据,默认情况下会出现一个单行文本框,其属性如下:

属性名称 说明
autofocus 让光标聚焦在某个 input 元素上,让用户直接输入
disabled 禁用 input 元素
autocomplete 单独设置 input 元素的自动完成功能
form 让表单外的元素和指定的表单挂钩提交
type input 元素的类型
name 定义 input 元素的名称,以便接收到相应的值

例:

<form action="https://www.itwordsweb.com"  target="_blank" autocomplete="on">
	 	6 用户名:<input name="user" autofocus>
	 	<button>提交</button>
</form>

3:button>元素添加一个按钮,type 为其属性,值有三个,如下:

值名称 说明
submit 表示按钮的作用是提交表单,默认
reset 表示按钮的作用是重置表单
button 表示按钮为一般性按钮,没有任何作用

例:

<button type="reset">重置</button>
重置表单
<button type="button">按钮</button>
普通按钮表单
<button type="submit">提交</button>
提交表单

4:<legend>元素添加分组说明标签

例:

<fieldset>
       <legend>注册</legend>
</fieldset>