好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

html5新增的表单控件和表单属性有哪些

HT ML 5是 互联网 的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技 术 之一。

HTML5是Web中核心语言HTML的规范,用户使用任何 手段 进行网页浏览时看到的内容原本都是 html格式 的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发 过程中 可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所 了解 的。

新的输入性表单控件:

em ai l: 电 子邮箱文本框,跟普通的没什么区别

- 当输入不是邮箱的时候,验证不通过

- 移动端的键盘会发生变化

tel:电话号码

url:网页的URL

se Arch :搜索引擎

- ch rom e下输入文字后,会多出一个关闭的X

range:特定范围内的数值选择器

- min、max、step(步数)

- 例子: 用js来显示当前数值

number:只能包含数字的输入框

- 输入框末尾有两个箭头 上为加 下为减

color:颜色选择器

- 点击显示颜色版

datetime:显示完整日期

- 类似select选择样式

datetime-local:显示完整日期, 不包含时区

time: 显示时间 ,不含时区

date:显示日期{ 年月 日}

week:显示周{年月日周}

mouth:显示月{年月}

(免费视频教程:html视频教程)

<form>
  <input ty PE ="email" />
  <input type="tel" />
  <input type="url" />
  <input type="search" />
  <!--一个滑块加一根长条 min最小表示数 max最大表示数 step 划一格跳几个数字-->
  <input type="range" min="1" max="10"  step="2"/>  <!---->  <input type="number" />  <input type="color" />
  <input type="s ub m IT " />
</form>

新的表单特性和函数

placeholder:输入框提示信息

- 例子: 微博 的密码框提示

auto complete

- 默认为on,关闭提示选择off

autofocus:指定表单获取输入 焦点

list和datalist:为输入框构造一个选择列表

- list值为datalist标签的id

requi red :此选项必填, 不能为空

Pattern: 正则验证

- pattern=“\d{1,5}”

Formaction在submit里定义提交地址

<input type="text"
  placeholder="请输入4-16个字符" // 输入框内显示
  autocomplete="off" //  是否 记录输入的值
  autofocus // 聚焦
  required // 输入框不能为空
  pattern="\d{1,5}" // 必须输入1到5个数字
 />
//  required 和 pattern 具有安全隐患 如果在控制台修改input的pattern和required 那么就可以破除校验

// 如果用户在某个页面输入相当多的数据,临时有事需要离开一段时间,此时数据 应该 保存至草稿箱,那么同一个form表单下,将会有两个不同地址的sumbit提交 ope浏览器已支持 其余浏览器可能不支持
<form action="https://HdhCmsTestbaidu .COM ">
  <input type="text">
  <input type="submit" value="提交" />
  <input type="submit" value="保存至草稿箱" formaction="http://HdhCmsTestmiaov测试数据"/>
</form>

相关推荐:html5教程

以上就是html5新增的表单控件和表单属性有 哪些 的详细内容,更多请关注其它相关 文章 !

总结

以上是 为你收集整理的 html5新增的表单控件和表单属性有哪些 全部内容,希望文章能够帮你解决 html5新增的表单控件和表单属性有哪些 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于html5新增的表单控件和表单属性有哪些的详细内容...

  阅读:17次