关于html:HTML新增表单元素和表单属性

43次阅读

共计 2892 个字符，预计需要花费 8 分钟才能阅读完成。

这一篇介绍 html5 新增的表单元素和表单属性。

首先先说一个 html5 中表单新增的一个性能，在咱们之前的 html 中，表单元素必须放在 form 元素所蕴含的外面，在 html5 中，能够把他们写在页面上的任何一个中央，而后给该元素减少一个 form 属性，form 属性的值为 form 表单的 id，如下：

<form method="get" id="test">
      <input type="text" name="name"/>
      <input type="password" name="password"/>
      <input type="submit" value="提交">
 </form>
<input type="text" name="confirm" form="test">

在 form 元素外面的表单元素能够不必增加 form 属性，如果你想利用 form 获取所有表单元素的值，那么在 form 元素里面的表单元素就必须增加 form 属性，input、select、textarea 等元素都满足该性能。
接下来开始介绍 html5 新增的表单元素，所有例子均用谷歌浏览器展现。

email： 提交表单的时候验证输出值是否满足 email 的格局

url： 提交表单的时候验证输出值是否满足 url 的格局

number： 依据你的设置提供抉择数字的性能，其中 min 为最小值，max 为最大值，value 为默认值，step 为点击箭头时数字的变动量，max、min、step、value 均可不写，目前某些浏览器还不反对。

range： 会以一个滑块的模式体现蕴含肯定范畴内数字值的输出域，max 为最大值，min 为最小值，value 为默认值，如果没有设置 max 和 min，默认值是 1 -100

date： 选取日、月、年

month： 选取月、年

week： 选取周、年

time： 选取小时、分钟

datetime： 选取工夫、日、月、年 (UTC 工夫)（我这里浏览器显示不出成果）

datetime-local： 选取工夫、日、月、年 (本地工夫)

search： 用于搜寻域，若加上 result=”s” 属性，则会在搜寻框后面加一个搜寻图标（我这里浏览器显示不出成果）

tel： 验证输出的是否是电话号码的格局（我这里浏览器显示不出成果）

color：color 类型会提供色彩拾取器，供用户抉择色彩，并将用户抉择的色彩填充到此元素中

新增 input 属性 (局部容易了解的就不进行代码演示了)，前面为反对该属性的元素

autofocus： 在关上页面时使元素主动获取焦点 //input,button,select,textarea

placeholder: 在用户输出时进行提醒 // input,textarea

form： 这篇文章的结尾就有这个属性，它用于表明元素属于哪个表单，无论元素的地位在哪里，所属表单都能获取该元素的值 //input,output,button,select,textarea,fieldset

required： 表明该元素是必填项，当提交表单的时候会主动验证该元素的内容是否不为空 //input,textarea

max/min/step： 限度值的输出范畴，以及值的变动水平。下面的新增 number 元素有介绍。//input

autocomplete： 使 form 元素或者 input 元素领有主动实现性能，既记录用户之前输出的值，敞开为 off，默认为 on。//form,input

表单重写属性： //input

formaction: 重写表单的 action 属性

formenctype: 重写表单的 enctype 属性。

enctype 属性治理的是表单的 MIME 编码，MIME 就是一种电子邮件传输的互联网规范，表明传递的信息类型和编码，共有三个值可选：

1，application/x-www-form-urlencoded（默认），设置表单传输的编码。

2，multipart/form-data，指定传输数据的非凡类型，次要就是上传的非文本内容，比方文件、图片。

3，text/plain，纯文本传输。

formmethod: 重写表单的 method 属性

formnovalidate: 重写表单的 novalidate 属性

formtarget：重写表单的 target 属性。
比方:

<form action="test.html" method="get" autocomplete="on">
 
        姓名: <input type="text" name="name" /><br />
 
        明码: <input type="password" name="pwd" /><br />
 
        <input type="submit" formnovalidate="true" value="提交未经验证"/>
      </form>

multiple: 规定输出字段可抉择多个值 //input,select

list：list 属性的值为 datalist 元素的 id，datalist 元素相似于抉择框，在文本框取得焦点的时候以提醒输出的形式显示。如下：

 姓名：<input type="text" name="name" list="name"/>
      <datalist id="name" >
        <option value="zhangsan"> 张三 </option>
        <option value="lisi"> 李四 </option>
        <option value-"wanger"> 王二 </option>
      </datalist>

pattern: 验证 input 输出域的格局，即正则表达式。

正文完