• 售前

  • 售后

热门帖子
入门百科

HTML5之HTML元素扩展(下)—增强的Form表单位素值得关注

[复制链接]
123457476 显示全部楼层 发表于 2021-10-25 19:55:26 |阅读模式 打印 上一主题 下一主题
在HTML5增强的元素中,最值得关注的就是表单位素。在HTML5中,表单已经做了重大的修整,一些以前必要通过JavaScript编码实现的功能现在无需编码就可轻松实现。在开始讨论之前,必要注意一点:
在HTML5中,表单控件是可以处于其所属的一个或多个表单的外部的。以是,表单控件像fieldset,label,input这些都到场了form属性,用于标识表单控件所属的表单。
在HTML5中
1. form元素自身增长了两个新的属性:autocomplete和novalidate。autocomplete属性用于启用“下拉建议列表”功能,novalidate属性用于关闭表单验证功能,这在测试时会很有效。
2. fieldset元素增长了三个新属性:disable、name和form。disable属性用于禁用fieldset,name属性用于设置fieldset的名称,form属性的值是fieldset所属的一个或多个表单的ID,这个前面也说了,当fieldset被置于表单的外部时,你必须设置该fieldset标签的form属性,如许fieldset就可以正确地与一个或多个表单关联起来。
3. label元素除for属性外,只增长了form属性。这里值得一提的是for属性,我以前还真没注意过。for属性用于指定label附属的表单控件,如许点击这个label时会让附属的表单控件获得核心,好比:

复制代码代码如下:
<form action="demo_form.asp" id="form1">
  <label for="name">Click Me</label><input id="name" type="text"></input>
  <input type="submit" value="Submit" />
</form>

点击"Click Me",则后面的输入框会获得核心。
4. input元素引入了一些新的类型与属性,增强了表单的可用性。这些新的输入类型,用于对数据举行组织和归类,非常有效,遗憾的是并没有哪一个欣赏器能很好的支持全部的这些类型。
除了原来button,text,submit,checkbox,radio,select,password的类型,HTML5到场了下列新的input类型:
颜色:color
各种日期:date, datetime, datetime-local, month, week, time
电子邮件:email
数字:number
范围:range
搜刮:search
电话:tel
URL类型:url可以运行下面的例子来查察差别欣赏器的支持环境:

复制代码代码如下:
<form action="demo_form.asp">
  Select your favorite color: <input type="color" name="favcolor" />
  Birthday: <input type="date" name="bday" />
  Birthday (date and time): <input type="datetime" name="bdaytime" />
  Birthday (date and time): <input type="datetime-local" name="bdaytime" />
  Birthday (month and year): <input type="month" name="bdaymonth" />
  Select a time: <input type="time" name="usr_time" />
  Select a week: <input type="week" name="week_year" />
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  Quantity(between 1 and 10): <input type="range" name="points" min="1" max="10" />
  Search Google: <input type="search" name="googlesearch" />
  Telephone: <input type="tel" name="usrtel" />
  Add your homepage: <input type="url" name="homepage" />
  E-mail: <input type="email" name="usremail" />
  <input src="submitbutton.png" type="submit" />
</form>

下面这些是新增长的input属性:
autocomplete:自动显示以前输入过的信息,取值"on"或者"off"。实用于text, search, url, tel, email, password, datepickers, range, and color类型。
autofocus:页面加载完成后自动获取到核心。
form:指定input所属的form,可以是多个。
formaction:指定form提交后处理处罚这个input的页面(URL)或文件。  
formenctype:指定form提交后数据怎样编码。
formmethod:指定发送form数据的HTTP方法,会覆盖相应form的HTTP方法。
formnovalidate:提交前不检查数据的有效性。
formtarget:指定在谁人地方显示form提交后response的内容。
height, width:输入框长和宽,只实用于image类型。 
max,min:输入值的最大值和最小值。实用于有意义的number,range, 日期类型。  
multiple:是否允许输入多个值,实用于email和file类型。
pattern:指定验证输入值的正则表达式,实用于text,search,url,tel,email,password。
placeholder:输入前的提示信息,实用于text,search,url,tel,email,password。
required:是否是必填项,如果不填必填项,则表单不能提交,实用于text, search, url, tel, email, password, date pickers, number, checkbox, radio, 和file类型。
step:输入自动增长时的步长值,实用于number, range, date, datetime, datetime-local, month, time和week类型。
list:输入项的候选列表,必要和datalist元素共同使用,list属性可用在这些类型上:text、search、url、tel、email、date、number、range和color,目测在FireFox上有效。看一个小例子:

复制代码代码如下:
<fieldset>
  <legend> Favorites </legend>
  <p>
    <label>
      <input type="text" name="favorites" list="options">
      <datalist id="options">
        <option value="A">
        <option value="B">
        <option value="C">
      </datalist>
    </label>
  </p>
</fieldset>

下面的例子实验使用了各个属性,可以运行在差别的欣赏器下查察实际效果:

复制代码代码如下:
<form action="demo_form.asp">
  E-mail: <input type="email" name="email" autocomplete="on" />
  Image: <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"/>
  Enter a date before 1980-01-01:<input type="date" name="bday" max="1979-12-31">
  Enter a date after 2000-01-01:<input type="date" name="bday" min="2000-01-02">
  Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5" />
  Select images: <input type="file" name="img" multiple="multiple" />
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" />
  First Name: <input type="text" name="fname" placeholder="First name" />
  Username: <input type="text" name="usrname" required="required" />
  Number: <input type="number" name="points" step="3" />

  <input type="submit" />
  <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
  <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data" />
  <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST" />
  <input type="submit" formnovalidate="formnovalidate" value="Submit without validation" />
  <input type="submit" formtarget="_blank" value="Submit to a new window" />
</form>
<form action="demo_form.asp" id="form1">
  First name: <input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
  Last name: <input type="text" name="lname" form="form1" />

建议:虽然并不是全部的欣赏器都支持全部的类型,但是还是鼓励各人使用这些新类型,因为即使欣赏器不支持,只不外是会退化成简单的text输入框而已。
实用参考:W3C的教程:http://www.w3schools.com/html5/default.asp
HTML5官方指导:http://dev.w3.org/html5/html-author/
相当不错的一个指导网站:http://html5doctor.com/
HTML5中文教程:http://www.html5china.com/
一个不错的前端博客:http://www.pjhome.net/default.asp?cateID=1
JS操纵表单的相关知识:http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作