新增的input输入类型

email

定义用于email地址的字段

url

定义用于输入URL的字段

number

定义用于输入数字的字段

range

定义用于精确值不重要的输入数字的控件

Date Pickers

date:定义date控件。month：定义month和year控件（不带时区）。week：定义week和year控件。time：定义用于输入时间的控件。datetime：定义date和time控件，基于UTC时区。date-time-local:定义date和time控件，不带时区。

search

定义用于输入搜索字符串的文本字段。

tel

定义用于输入电话号码的字段。

color

定义拾色器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input输入元素</title>
</head>
<body>
<form action="#" method="get">
    <input type="email" name="user_email">
    <input type="url" name="user_url">
    <input type="number" name="user_number" value="1" max="100" min="1" step="2">
        <input type="range" name="user_range" value="1" max="100" min="1" step="2">
    <input type="date" name="user_date">
    <input type="month" name="user_month">
    <input type="week" name="user_week">
    <input type="time" name="user_time" value="12:10:14" min="01:00:00" max="20:00:00" step="2">
    <br/>
    <input type="datetime-local" name="user_datetime">
    <br/><input type="search" name="user_search">
    <br/><input type="tel" name="user_tel">
    <br/><input type="color" name="user_color">

    <br/><input type="submit" value="提交">
</form>
</body>
</html>

HTML5新增的input属性：

autocomplete

规定<input>元素输入字段是否应该启用自动完成功能。

autofocus

规定当页面加载时<input>元素应该自动获得焦点

form

规定<input>元素所属的一个或多个表单

新增的表单重写属性

formaction:规定当表单提交时处理输入控件的文件的URL。

formenctype:规定当表单数据提交到服务器时如何编码。

formmethod:定义发生表单数据到action URL的HTTP方法。

formnovalidate:formnovalidate属性覆盖<form>元素的novalidate属性。

formarget:规定标识提交表单后在哪里显示接收到响应的名称或关键词。

除了formnovalidate属性，其他属性都是只针对type=“submit"和type="image".

新增的heighth和width属性

规定<input>元素的高度、和宽度。（只针对type=”image“）。

 

list

属性引用<datalist>元素，其中包含<input>元素的预定义选项。

新增的min、max和step

min:规定输入框所输入的最小值。

max:规定输入框所输入的最大值。

step：为输入框规定合法的数字间隔。

multiple

属性规定允许用户输入到<input>元素的多个值。

pattern

规定用于验证<input>元素的值的正则表达式。

placeholder

规定可描述输入<input>字段预期值的简短的提示信息。

required

规定必需在提交表单之前填写输入字段。。

 

<body>
    <h2>HTML5自动完成功能示例</h2>
    <form action="LoginServlet" method="post" autocomplete="on">
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="password"><br>
        输入你最喜欢的水果<br><br>
        <input type="text" id="fruit" list="fruitList" autocomplete="on">
        <datalist id="fruitList" style="display: none;">
            <option value="orange">桔子</option>
            <option value="pear">香梨</option>
            <option value="apple">苹果</option>
        </datalist>
        <input type="submit" value="登陆">
    </form>
</body>
<form>
    <p><label for="textarea1">请仔细阅读许可协议：</label></p>
    <p>
        <textarea name="textarea1" id="textarea1" cols="45" rows="5">许可协议许可协议许可协议</textarea>
        <br>
    </p>
    <p>
        <input type="submit" value="同意" autofocus="on">
        <input type="submit" value="拒绝">
    </p>
</form>
请选择要上传的图片：Select images：<input type="file" name="img" multiple>
请输入国家代码：<input type="text" name="country_code" pattern="[A-Za-z]{3}" placeholder="请输入国家代码">
请输入姓名：<input type="text" name="usr_name" required="required">
<form action="#" enctype="application/x-www-form-urlencoded" method="get" id="testform">
请输入电子邮件地址：<input type="email" name="userid"><br>
    <input type="submit" value="formaction" formaction="list.html">
    <input type="submit" value="formtype" formenctype="multipart/form-data">    //type是file时使用
    <input type="submit" value="formmethod" formmethod="post">
    <input type="submit" value="formnovalidate" formnovalidate="formnovalidate">  //不验证表单控件
    <input type="submit" value="formtarget" formtarget="_self">
    <input type="submit" value="提交">
</form>