HTML5新增的input 输⼊类型
新增的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 定义拾⾊器
HTML5新增的input属性：
autocomplete
规定<input>元素输⼊字段是否应该启⽤⾃动完成功能。autofocus
input标签placeholder属性规定当页⾯加载时<input>元素应该⾃动获得焦点form 规定<input>元素所属的⼀个或多个表单
formaction：规定当表单提交时处理输⼊控件的⽂件
的URL。
formenctype：规定当表单数据提交到服务器时如何
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<title>input 输⼊元素</title>6
</head>7
<body>8
<form action="#" method="get">9
<input type="email" name="user_email">10
<input type="url" name="user_url">11
<input type="number" name="user_number" value="1" max="100" min="1" step="2">12
<input type="range" name="user_range" value="1" max="100" min="1" step="2">13
<input type="date" name="user_date">14
<input type="month" name="user_month">15
<input type="week" name="user_week">16
<input type="time" name="user_time" value="12:10:14" min="01:00:00" max="20:00:00" step="2">17
<br/>18
<input type="datetime-local" name="user_datetime">19
<br/><input type="search" name="user_search">20
<br/><input type="tel" name="user_tel">21
<br/><input type="color" name="user_color">22
23
<br/><input type="submit" value="提交">24
</form>25</body>26</html>
新增的表单重写属性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规定必需在提交表单之前填写输⼊字段。。
1<body>
2    <h2>HTML5⾃动完成功能⽰例</h2>
3    <form action="LoginServlet" method="post" autocomplete="on">
4⽤户名：<input type="text" name="username"><br>
5密码：<input type="password" name="password"><br>
6输⼊你最喜欢的⽔果<br><br>
7        <input type="text" id="fruit" list="fruitList" autocomplete="on">
8        <datalist id="fruitList" >
9            <option value="orange">桔⼦</option>
10            <option value="pear">⾹梨</option>
11            <option value="apple">苹果</option>
12        </datalist>
13        <input type="submit" value="登陆">
14    </form>
15</body>
1<form>
2    <p><label for="textarea1">请仔细阅读许可协议：</label></p>
3    <p>
4        <textarea name="textarea1" id="textarea1" cols="45" rows="5">许可协议许可协议许可协议</textarea>
5        <br>
6    </p>
7    <p>
8        <input type="submit" value="同意" autofocus="on">
9        <input type="submit" value="拒绝">
10    </p>
11</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">
1<form action="#" enctype="application/x-www-form-urlencoded" method="get" id="testform">
2请输⼊电⼦邮件地址：<input type="email" name="userid"><br>
3    <input type="submit" value="formaction" formaction="list.html">
4    <input type="submit" value="formtype" formenctype="multipart/form-data">    //type是file时使⽤
5    <input type="submit" value="formmethod" formmethod="post">
6    <input type="submit" value="formnovalidate" formnovalidate="formnovalidate">  //不验证表单控件
7    <input type="submit" value="formtarget" formtarget="_self">
8    <input type="submit" value="提交">
9</form>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。