html5表单

本文介绍了HTML表单的相关知识,包括表单语法、元素格式、元素类型等。还提及增强鼠标可用性的方法,如自动转移焦点。此外,阐述了placeholder、required、pattern等属性的作用,以及常用表单元素,如文本框、密码框等。

表单语法

<form  method="post" action="result.html">

   <p>  名字:<input name="name" type="text" >  </p>

   <p>  密码:<input name="pass" type="password" >  </p>

   <p>

      <input type="submit" name="Button" value="提交"/>

      <input type="reset" name="Reset" value="重填“/>

   </p>

</form>

 

 表单元素格式

input  type="text"  name="fname" value="text"/>

属性

说明

type

指定元素的类型textpasswordcheckboxradiosubmitresetfilehiddenimage button默认为 text

name

指定表单元素的名称

value

元素的初始值type radio必须指定一个值

size

指定表单元素的初始宽度 type text password,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位

maxlength

typetext password 时,输入的最大字符

checked

typeradiocheckbox时,指定按钮是否是被选中 

表单元素

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />

 

增强鼠标的可用性

自动将焦点转移到与该标注相关的表单元素上

<label for="id">标注的文本</label>

<input type="radio" name="gender" id="male"/>

 

placeholder

input类型的文本框提供一种提示(hint

可以描述文本框期待用户输入何种内容

提示语默认显示当文本框中输入内容时提示语消失

适合于input标签:textsearchurlemailpassword等类型

 

required

规定文本框填写内容不能为空,否则不允许用户提交表单

适合于input标签textsearchurlemailpasswordnumbercheckboxradiofile等类型

 

pattern

用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

常用的表单元素

文本框(text

密码框(password

单选按钮(radio

复选框(checkbox

列表框(<select><option>

按钮(buttonsubmitreset

邮箱(<email>

网址<url>

数字<number>

滑块<range>

搜索<search>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值