实现HTML5表单

一、HTML5的特点

HTML5包括新标签+css+JS(API)

二、新标签

1、input标签：

1）颜色选择器标签：

<input type="color" name="" value="" placeholder="请选择颜色"/>

其中：placeholder 水印或者提示语效果属性。提示语的效果是当鼠标点击到输入框进行输入时提示语消失，不输入时提示语就显示在背景上，且不能删除。

2）日期标签：

常用日期标签，显示年月日输入框：

<input type="date" name="" value="" placeholder="请选择日期"/>

无时区日期标签，显示年月日、时间输入框：

<input type="datetime-local" name="" value="" placeholder="无时区"/>

时间的标签，只显示时分秒：

<input type="time" name="" value="" placeholder="请选择时间"/>

3）邮箱标签，自带验证格式功能

<input type="email" name="" value="" placeholder="请输入邮箱"/>

4）数字标签

手动输入方式，可以指定数字的范围（min，max），以及递增数字的间隔（step）：

<input type="number" name="" value="" placeholder="请选择数字"   min="1" max="200" step="2"/>

滚动条方式显示数据，其中value代表默认值（只能从min和max中进行选择），用于做进度条：

<input type="range" name="" value="30" placeholder="请选择数字"  min="1" max="200" step="2"/>

5）查询标签

<input type="search" name="" value="30" placeholder="请输入查询条件"/>

效果如下：

6）网址标签，自带格式验证：

<input type="url" name="userwebsite" placeholder="个人网址" />

7）文本标签：

<textarea type="message" name="selfInfo" placeholder="个人简介"></textarea>

2、示例：

<!doctype html>
<html>
  <head>
    <title>HTML5-表单-例子</title>
  </head>
<body>
  <form action="index.jsp" method="post">
    <label>用户名：</label>
    <input type="text" name="username" placeholder="用户名" required/><br>
    <label>邮箱：</label>
    <input type="email" name="email" placeholder="邮箱" required/><br>
    <label>个人网址：</label>
    <input type="url" name="userwebsite" placeholder="个人网址" required/><br>
    <label>年龄：</label>
    <input type="number" name="userwebsite" placeholder="年龄" min="1" max="200"/><br>
    <label>阶段：</label>
    <input type="range" name="range" placeholder="阶段" min="1" max="4"/><br>
    <label>个人简介：</label>
    <textarea type="message" name="selfInfo" placeholder="个人简介"></textarea><br>
    <input type="submit" value="提交"/>
</body>
</html>

其中：required代表必输元素

效果如下：

猜你喜欢