从零开始前端学习[41]:html5中新增加的一些智能表单

本文介绍了HTML5中新增的各种智能表单元素及其属性，包括email、tel、url等输入类型及required、list等属性，并展示了如何使用这些元素来增强表单的用户体验。

html5中新增加的一些智能表单

input type类型email，tel，url，range，search，number，color，date
input的一些属性placeholder，required，list

提示：
博主：章飞_906285288
博客地址:http://blog.youkuaiyun.com/qq_29924041

input type类型email，tel，url，range，search，number，color，date，time,datetime-local,week,month属性值

关于以上的一些属性值，下面通过表格的形式展示出来

属性值	含义
email	验证是否为正确的email格式，如果不，点击提交按钮会显示提示
tel	规定表单内容是数字，跳转到数字键盘（只有在移动端才会显示）
url	规定表单内容是网址，如果不，则会显示提示。内容需要完整的http://
range	拖动条，step属性可以设置每次变换大小，支持value，max，min等属性
search	在表单内输入内容之后会显示一个关闭符号，可以删除输入的内容
number	输入框中输入了数字，输入数字可以点击加减
color	点击弹出调色板
date	显示日期，不含时区
time	显示时间，不含时区
datetime-local	显示完整日期，不含时区
week	显示周
month	显示月
required	是属性，输入内容不能为空，如果为空则会有相应的提示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    .main{width: 600px;margin: 100px auto}
    .in_1{
          width: 300px;
          height: 40px;
          vertical-align: middle;
        }
    .in_2{
          width: 100px;
          height: 40px;
          vertical-align: middle;
        }
  </style>
</head>
<body>
  <div class="main">
    <form action="www.baidu.com">
      <!--验证是否为正确的email格式，如果不，点击提交按钮会显示提示。-->
      <input type="email" class="in_1">
      <input type="submit" class="in_2" value="email">
      <br><br>
      <!--规定表单内容是数字，跳转到数字键盘（只有在移动端才会显示）-->
      <input type="tel" class="in_1">
      <input type="submit" class="in_2" value="tel">
      <br><br>

      <!--规定表单内容是网址，如果不，则会显示提示。内容需要完整的http://-->
      <input type="url" class="in_1">
      <input type="submit" class="in_2" value="url">
      <br><br>

      <!--拖动条，step属性可以设置每次变换大小，支持value，max，min等属性-->
      <input type="range" class="in_1">
      <input type="submit" class="in_2" value="range">
      <br><br>

      <!--在表单内输入内容之后会显示一个关闭符号，可以删除输入的内容-->
      <input type="search" class="in_1">
      <input type="submit" class="in_2" value="search">
      <br><br>

      <!--输入数字可以点击加减-->
      <input type="number" class="in_1">
      <input type="submit" value="number" class="in_2">
      <br><br>

      <!--点击弹出调色板-->
      <input type="color" class="in_1"/>
      <input type="submit" value="color" class="in_2">
      <br><br>

      <!--显示完整日期，不含时区-->
      <input type="datetime-local" class="in_1">
      <input type="submit" value="datetime-local" class="in_2">
      <br><br>

      <!--显示时间，不含时区-->
      <input type="time" class="in_1">
      <input type="submit" value="time" class="in_2">
      <br><br>

      <!--显示日期，不含时区-->
      <input type="date" class="in_1">
      <input type="submit" value="date" class="in_2">
      <br><br>

      <!--显示周-->
      <input type="week" class="in_1">
      <input type="submit" value="week" class="in_2">
      <br><br>

      <!--显示月-->
      <input type="month" class="in_1">
      <input type="submit" value="month" class="in_2">
      <br><br>

    </form>
  </div>
</body>
</html>

显示效果如下所示：

这里写图片描述

input的list属性

输入关键字显示备用选项 list属性对应datalist的id值

 <!--输入关键字显示备用选项 list属性对应datalist的id值-->
    请填写你的性别：<input type="text" class="in_1" list="lis">
    <datalist id="lis">
        <option value="男"></option>
        <option value="女"></option>
        <option value="中性人"></option>
    </datalist>
    <input type="submit" value="datalist" class="in_2">

以上就是一些关于html5相关的表单的相关标签属性