HTML5中表单标签的属性

Author: 刘老师(Aaron Lau) 武汉长乐教育,武汉PHP培训课程,版权所有,转载请注明!

HTML5中表单标签的属性

本课摘要

  1. placeholder, 显示描述信息
  2. autocomplete, 自动完成
  3. autofocus, 表单自动获取焦点
  4. list和datalist元素
  5. min/max和step 滑块最小值/最大值和步长
  6. required 必填

1. placeholder, 显示描述信息

<input type="search" name="user_search"  placeholder="武汉php"/>

2. autocomplete, 自动完成

<form action="test.php" method="get" autocomplete="on">
    姓名:<input type="text" name="name" /><br />
    昵称: <input type="text" name="nickname" /><br />
    E-mail: <input type="email" name="email" autocomplete="off" /><br />
    <input type="submit" />
</form>

3. autofocus, 表单自动获取焦点

用户名: <input type="text" name="username"  autofocus />

4. list和datalist元素

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">
    <option label="canon4ever" value="http://www.canon4ever.com.cn" />
    <option label="whphp" value="http://www.whphp.com" />
</datalist>

5. min/max和step 滑块最小值/最大值和步长

<input type="range" min="0" max="100" value="0" step="20"/>

6. required 必填

<input type="text" name="username" required />

7. pattern 验证

<input type="text" pattern="[0-9]{4}" title="只能输入0-9且最少需要4位数" />
上一篇课程 下一篇课程

学生登录