HTML5文档中的表单 表单的应用、属性、元素

鳄鱼君Ba

发表文章数:518

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » HTML5教程 » HTML5文档中的表单 表单的应用、属性、元素

表单是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元素

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《HTML5文档中的表单 表单的应用、属性、元素》 发布于2020-05-22

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

1 + 9 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册