念念不忘,html5表单及新增的改良元素详解

  

念念不忘,html5表单及新增的改良元素详解
  <!–表单内元素的formaction属性:可以提交到不同页面–>,<inputtype="text"placeholder="请输入内容"/><br/>,tel:<inputtype="tel"/><br/>。
  下面小编就为大家带来一篇html5表单及新增的改良元素详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  <metacharset="UTF-8">
  <!–表单内元素的form属性:为元素指定一个form属性,属性值为该表单的id–>
  <formid="testform">
  <inputtype="submit"/>
  <textareaform="testform"></textarea><br/><hr/>
  <!–表单内元素的formaction属性:可以提交到不同页面–>
  <formid="form1"action="">
  <inputtype="submit"name="s1"value="内部提交到test2"formaction=""/>
  <inputtype="submit"/>
  <!–formmethod:可以为每个表单元素指定不同的提交方法–>
  <formid="form2"action="">
  name:<inputtype="text"name="name"/><br/>
  <inputtype="submit"value="post方式提交"formmethod="post"/>
  <inputtype="submit"value="get方式提交"formmethod="get"/>
  </form><br/><hr/>
  <!–formenctype:可以指定不同的编码方式–>
  <formaction=""method="post">
  <inputtype="text"name="name"id="name"value="test"/>
  文件:<inputtype="file"name="files"/>
  <inputtype="submit"value="上传"formaction=""formenctype="multipart/form-data"/>
  <inputtype="submit"value="提交"/>
  </form><br/><hr/>
  <!–formtarget:提交后再何处打开页面–>
  <formaction="">
  <inputtype="submit"name="s1"value="s1本页打开"formaction=""formtarget="_self"/>提交到test2
  <inputtype="submit"name="s"value="s新页打开"formaction=""formtarget="_blank"/>提交到test
  <!–autofocus:自动获得光标焦点–>
  <inputtype="text"autofocus/><br/>
  <!–control:通过该属性来访问该表单元素–>
  <labelid="label">
  邮编:<inputid="txtzip"maxlength="6"/><small>请输入6位数字</small>
  <inputtype="button"value="设置默认值"onclick="setValue"/>
  <!–placeholder:未输入状态的输入提示–>
  <inputtype="text"placeholder="请输入内容"/><br/>
  <!–list:单行文本框的list属性,属性值为datalist的id。autplete:自动完成–>
  list属性:<inputtype="text"list="mylist"autplete="on"/>
  <datalistid="mylist">
  <optionvalue="第一">第一</option>
  <optionvalue="第二">第二</option>
  <optionvalue="第三">三</option>
  <!–pattern:设置正则表达式验证–>
  输入一个字母与三个大写字母:<inputtype="text"pattern="{3}"required=""/>
  <inputtype="submit"/>
  <!–indeterminate:说明复选框处于尚未明确是否选取状态–>
  <inputtype="checkbox"indeterminateid="cb"/>indeterminate<br/>
  <!–image的height和width设置图片高宽–>
  设置图片宽高:<inputtype="image"src="img/"alt="编辑"width="23"height="23"/><br/>
  <!–textarea:maxlength和wrap属性:hard换行也要指定cols,soft不换行–>
  <formaction=""method="post">
  <textareaname="name"maxlength="10"rows="5"cols="5"wrap="hard"></textarea>
  <inputtype="submit"value="提交"/>
  <!–url类型:只能提交url地址格式–>
  url:<inputtype="url"name="url"required=""/><inputtype="submit"/><br/>
  email:<inputtype="email"name="email"required=""/><inputtype="submit"/><br/>
  date:<inputtype="date"name="date"/><br/>
  time:<inputtype="time"name="time"/><br/>
  datetime-local:<inputtype="datetime-local"name="datetime"value="2016-05-26T22:31:30"/><br/>
  <!–日期时间类型的step属性:单击调整时对选择值多大限定–>
  step:<inputtype="date"step="3"/><br/><hr/>
  number:<inputtype="number"value="25"min="10"min="20"max="30"step="2"/><br/>
  range:<inputtype="range"value="25"min="10"max="100"step="5"/><br/>
  search:<inputtype="search"/><br/>
  tel:<inputtype="tel"/><br/>
  color:<inputtype="color"/><br/>
  <formid="testform">
  请选择一个值:<inputtype="range"id="range"min="5"max="100"step="5"value="10"onchange="out;"/>
  <outputid="out">10</output>
  <scripttype="text/javascript">
  vartxtbox=;//通过control该属性来访问该表单元素
  

念念不忘,必有回响。技术成就梦想!
  

以上这篇html5表单及新增的改良元素详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
  小编觉得挺不错的,现在就分享给大家,也给大家做个参考,<inputtype="submit"value="上传"formaction=""formenctype="multipart/form-data"/>,<!–pattern:设置正则表达式验证–>,color:<inputtype="color"/><br/>。

评论

电子邮件地址不会被公开。 必填项已用*标注