Html5新增类型

html5新增属性

placeholder：（HTML5中新属性，IE8及以下浏览器中无效）设置文本框中的提示信息，会在输入域为空时显示出现，默认为灰色显示，当用户在输入域中输入第一个字符时提示会消失；删除用户输入的信息之后会再显示。
required：（HTML5中新属性，IE8及以下浏览器中无效），取值为required，设置输入域不允许为空，即提交数据前必须要填写，否则点击提交按钮时会进行提示。
placeholder和required可以在表单大多数输入元素中使用，后面不再逐个列举。
例子：
源代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文本框、密码框、隐藏表单域</title>

</head>
<body>
 <div class="divw">
  <h3>用户登录页面</h3>
  <form  method="get" >
    <table width="300" align="center" border="0" cellpadding="0" cellspacing="0">
     用户名：<br><input type="text" name="uName" placeholder="请在此输入姓名" required="required"/><br>

     密码：<br><input type="password" name="pass" placeholder="请在此输入密码" required="required"/><br>
     <input type="hidden" name="type" value="3" />
     <input type="submit" value="  提  交  " />
 </div>
</body>
</html>

新增输入类型

HTML5 新增了多个类型的<input />输入元素，常用的有email、url、number、range、Date pickers、color，这些新类型的元素提供了更好的输入控制和验证。

邮件地址 type="email"

<input type="email" id||name="名称" />
email 类型设置要包含 e-mail 地址的输入域，要求输入内容中必须包含@符号，在提交表单时，会自动验证 email 域的值。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>

</body>
</html>

网址 type="url"

<input type="url" id||name="名称" />
url 类型设置要包含 URL 地址的输入域，要求输入内容必须以http:开始，后面要有域名地址，但是对http:后面的双斜杠//没有做要求，即若是输入“http:www.sict.edu.cn”也能接收。
在提交表单时，会自动验证 url 域的值。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
网页：<input type="url" name="user_url" /><br />
<input type="submit" />
</form>

</body>
</html>

数值类型

<input type="number" id||name="名称" min="最小值" max="最大值" step="数字间隔" value="默认值"/>

number 类型设置包含数值的输入域，能够设定对所接受的数字的限定，光标放入输入元素后显示微调按钮。
step规定合法的数字间隔，若最小值为15，数字间隔为2，则合法的数字有15、17、19等。
提交表单时，会对数据进行合法性验证。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Points: <input type="number" name="points" min="1" max="10" />
<input type="submit" />
</form>

</body>
</html>

滑块数字类型 type="range"

input type="range" id||name="名称" min="最小值" max="最大值" step="数字间隔" value="默认值" />
range 类型用于设置要包含指定范围内数字值的输入域，显示为滑块形式。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10" />
<input type="submit" />
</form>

</body>
</html>

日期选择器

HTML5 拥有多个可供选取日期和时间的新输入类型，使用type设置相应取值可分别选取不同的信息，下面为type属性可用的取值以及可选取的信息说明：

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间，通用协调时间）
datetime-local - 选取时间、日、月、年（本地时间

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Date: <input type="date" name="user_date" />
<input type="submit" />
</form>

</body>
</html>

颜色选择 type="color"

color 输入类型用于规定颜色。

该输入类型允许您从拾色器中选取颜色：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
Color: <input type="color" name="user_color" /><br />
<input type="submit" />
</form>

</body>
</html>

实训：

代码1：

<!DOCTYPE HTML>
<html>

<body>

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>

</body>
</html>

代码2：

<form action="dreamdu.php" method="post" id="dreamduform">
    <fieldset>
        <legend>用户名与密码:</legend>
        <input id="hiddenField" name="hiddenField" type="hidden" value="hiddenvalue" />
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" value="dreamdu" />
        <label for="pass">密码:</label>
        <input type="password" id="pass" name="pass" />
    </fieldset>
    <fieldset>
        <legend>性别:</legend>
        <label for="boy">男</label>
        <input type="radio" value="1" id="sex" name="sex" />
        <label for="girl">女</label>
        <input type="radio" value="2" id="sex" name="sex" />
        <label for="sex">保密</label>
        <input type="radio" value="3" id="sex" name="sex" />
    </fieldset>
    <fieldset>
        <legend>我最喜爱的:</legend>
        <label for="computer">计算机</label>
        <input type="checkbox" value="1" id="fav" name="fav" />
        <label for="trval">旅游</label>
        <input type="checkbox" value="2" id="fav" name="fav" />
        <label for="buy">购物</label>
        <input type="checkbox" value="3" id="fav" name="fav" />
    </fieldset>
    <fieldset>
        <legend>对梦之都的意见:</legend>
        <label for="select">你对梦之都的感觉</label>
        <select size="1" id="select" name="select">
            <option>很全面,很好</option>
            <option>一般般吧,还要努力</option>
            <option>有很多问题,不过还可以</option>
        </select>
    </fieldset>
    <fieldset>
        <legend>梦之都编程语言选择:</legend>
        <label for="multipleselect">你想在梦之都学习的编程语言</label>
        <select size="10" multiple="multiple" id="multipleselect" name="multipleselect">
            <option>XHTML</option>
            <option>CSS</option>
            <option>JAVASCRIPT</option>
            <option>XML</option>
            <option>PHP</option>
            <option>C#</option>
            <option>JAVA</option>
            <option>C++</option>
            <option>PERL</option>
        </select>
    </fieldset>
    <fieldset>
        <legend>我要在梦之都学:</legend>
        <label for="WebDesign">选择一个你在梦之都最想学的</label>
        <select id="WebDesign" name="WebDesign">
            <optgroup label="client">
                <option value="HTML">HTML</option>
                <option value="CSS">CSS</option>
                <option value="javascript">javascript</option>
            </optgroup>
            <optgroup label="server">
                <option value="PHP">PHP</option>
                <option value="ASP">ASP</option>
                <option value="JSP">JSP</option>
            </optgroup>
            <optgroup label="database">
                <option value="Access">Access</option>
                <option value="MySQL">MySQL</option>
                <option value="SQLServer">SQLServer</option>
            </optgroup>
        </select>
    </fieldset>
    <fieldset>
        <legend>个人化信息:</legend>
        <label for="myimage">个性照片上传</label>
        <input type="file" id="myimage" name="myimage" size="35" maxlength="255" />
        <label for="contactus">联系我们</label>
        <textarea cols="50" rows="10" id="contactus" name="contactus">
            可爱的猴子
        </textarea>
    </fieldset>
    <fieldset>
        <legend>提交:</legend>
        <input type="submit" value="submit" id="submit" name="submit" />
        <input type="reset" value="reset" id="reset" name="reset" />
    </fieldset>
</form>

代码3：

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <fieldset>
      <legend>Enter Your Details</legend>
      <p>
        <label for="name">Name: <input id="name" name="name" /></label>
      </p>
      <p>
        <label for="name">City: <input id="city" name="city" /></label>
      </p>
    </fieldset>
    <fieldset>
      <legend>Vote For Your Three Favorite Fruits</legend>
      <p>
        <label for="fave1">#1: <input id="fave1" name="fave1" /></label>
      </p>
      <p>
        <label for="fave2">#2: <input id="fave2" name="fave2" /></label>
      </p>
      <p>
        <label for="fave3">#3: <input id="fave3" name="fave3" /></label>
      </p>
    </fieldset>
    <fieldset>
      <legend accesskey="y">
        About <u>Y</u>ou (ALT + Y)
      </legend>
      <p><label for="userName">User name:</label>
         <input type="text" name="txtUserName" size="20" id="userName" />
      </p>
    </fieldset>

    <fieldset>
      <legend accesskey="u">
        About <u>U</u>s (ALT + U)
      </legend>
      <p>
        <label for="referrer">How did you hear about us?</label>:<br/>
        <select name="selReferrer" id="referrer">
          <option selected="selected" value="">Select answer</option>
          <option value="website">Another website</option>
          <option value="printAd">Magazine ad</option>
          <option value="friend">From a friend</option>
          <option value="other">Other</option>
        </select>
      </p>
    </fieldset>
    
    <button>Submit Vote</button>
  </form>
</body>
</html>

Html5新增类型

目录

html5新增属性

新增输入类型

邮件地址 type="email"

网址 type="url"

数值类型

滑块数字类型 type="range"

日期选择器

颜色选择 type="color"

实训：

导航菜单

个人工具

命名空间

变种

视图

更多

搜索

导航

工具