表单是HTML网页中的重要元素,利用表单可以使网页从单向的信息传递发展到与用户进行交互对话,并且能够实现网上注册、网上登录、网上交易等多种功能。
表单是网页上用于输入信息的区域,用来实现网页与用户的交互、沟通。
HTML5的表单
一个完整的表单信息包括提示信息(用户名、密码等提示信息)、表单域(容纳所有的表单控件和提示信息)、表单控件(登录按钮,用户信息填写框)
在HTML5中<form></form>标记用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,<form></form>中所有内容都会被提交给服务器端。基本语法乳腺
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
<form>与</form>之间的表单控件是由用户自定义的,action、method为表单标记<form>的常用属性。
创建一个简单的表单
<form action="https://www.e1yu.com" method="post"> <!-- 表单域 -->
账号: <!-- 提示信息 -->
<input type="text" name="username"> <!-- 表单控件 -->
密码: <!-- 提示信息 -->
<input type="password" name="password"> <!-- 表单控件 -->
<input type="submit" value="提交"> <!-- 表单控件 -->
</form>
HTML5表单的属性
在HTML5中,表单拥有多个属性,通过设置表单属性可以实现提交方式、自动完成、表单验证等不同的表单功能。
action属性:在表单收集到信息之后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的URL地址。
method属性:用于设置表单数据的提交方式,其取值为get或post。
name属性:用于指定表单的名称,以区分同一个页面中的多个表单。
autocomplete属性:用于指定表单是否有自动完成功能。自动完成功能就是将表单控件输入的内容记录下来,当再次输入时,会将输入的历史记录显示在一个下拉列表中,以实现自动完成输入。on表示表单有自动完成功能;off表示表单无自动完成功能。
novalidate属性:指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时,可以关闭整个表单的验证,这样可以使form内所有的表单控件不被验证。没什么用
<form>标记的属性并不会直接影响表单的显示效果,要想让一个表单有意义,就必须在<form>与</form>之间之间添加相应的表单控件。
HTML5表单的元素
● textarea元素,textarea控件可以创建多行文本输入框。
<textarea cols="每行中的字符数" rows="显示的行数">
显示的文本内容
</textarea>
textarea可选属性:
属性 | 属性值 | 描述 |
---|---|---|
name | 用户自定义 | 控件名称 |
readonly | readonly | 该控件内容为只读(不能编辑修改) |
disabled | disabled | 第一次加载页面时禁用该控件(显示为灰色) |
● select元素,浏览网页时,经常会看到包含多个选项的下拉菜单,常常用于翻页、用户信息收集。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
....
</select>
标记名 | 常用属性 | 描述 |
---|---|---|
<select> | size | 控件名称 |
multiple | 定义为multiple=”multiple”时,下拉菜单将具有多项选择的功能,按住Ctrl键选择多项 | |
<option> | selected | 定义selected=”selected”时,当前项即为默认选中项 |
为下拉菜单中的选项进行分组:
<form action="#" method="post">
<select>
<optgroup label="河南省">
<option>南阳市</option>
<option>郑州市</option>
<option>开封市</option>
</optgroup>
<optgroup label="河南省">
<option>南阳市</option>
<option>郑州市</option>
<option>开封市</option>
</optgroup>
</select>
</form>
● detalist元素,用于定义输入框的选项列表,列表通过datalist内的option元素进行创建。如果用户不希望从列表中选择某项,也可以自行输入其他内容。
在使用<datalist>标记时,需要通过id属性为其指定一个唯一标黄思,然后为input元素指定list属性,将该属性设置为option元素对应的id属性值即可。
<form action="#" method="post">
请输入用户名:<input type="text" list="namelist">
<datalist id="namelist">
<option>鳄鱼君Ba</option>
<option>老王</option>
<option>老赵</option>
</datalist>
</form>
● keygen元素
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!