HTML5针对<input>
添加了许多属性:
autofocus属性
页面加载时自动聚焦到输入字段
<form action="action_page.php" >
名字: <input type="text" name="fnam" autofocus><br>
姓氏:<input type="text" name="lname"><br>
<input type="submit">
</form>
form属性
将表单元素与页面中任意 <form>
关联
<form action="action_page.php" id="form1" >
First name <input type="text" name="fname" ><br>
<input type="submit" value="Submit">
</form>
formaction属性
覆盖表单的默认提交地址:允许为某个提交按钮或图片按钮指定独立的提交 URL,覆盖 <form>
的 action 属性。
<form action="action_page.php" >
First name<input type="text" name="fnam" ><br>
Last name<input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_adminx.asp" value="Submit as admin">
</form>
formenctype属性
覆盖表单数据的编码类型:指定特定按钮提交时的数据编码方式,覆盖 <form>
的 enctype 属性。
<form action="demo_post_enctype.asp" method="post" >
First name <input type="text" name="fname" ><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart">
</form>
formmethod属性
覆盖表单的 HTTP 方法:指定特定按钮提交时使用的 HTTP 方法(如 GET 或 POST),覆盖<form>
的 method 属性。
<form action="action_page.php" method="get">
First name<input type="text" name="fnam" ><br>
Last name<input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formmethod= "post" formaction="demo_adminx.asp" value="Submit as admin">
</form>
formnovalidate属性
为特定提交按钮禁用表单验证
<form action="action_page.php" >
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate="Submit width validation">
</form>
formtarget属性
指定表单提交后响应数据加载的目标窗口或框架
<form action="action_page.php" >
First name<input type="text" name="fnam" ><br>
Last name<input type="text" name="lname"><br>
<input type="submit" value="Submit as admin"><br>
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
height and width属性
定义 <input type="image">
图片按钮的显示尺寸
<form action="action_page.php">
First name<input type="text" name="fnam" ><br>
Last name<input type="text" name="lname"><br>
<input type="image" src="../img/img_submit.gif" alt="Submit" width="48" height="48">
</form>
list属性
将输入框与 <datalist>
关联,提供下拉候选值
<form action="demo_form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<aption value="Internt Explorer"></aption>
<aption value="Firefox"></aption>
<aption value="Chrome"></aption>
<aption value="Opera"></aption>
<aption value="Safari"></aption>
</datalist>
<input type="submit">
</form>
min and max属性
限制数值或日期/时间输入的最小值和最大值。
<form action="action_page.php">
输入一个 1980-01-01 之前的日期 <br>
<input type="date" name="body" max="1979-12-31"> <br><br>
输入一个 2000-01-01 之后的日期: <br>
<input type="date" name="bday" min="2000-01-02"><br><br>
数字(1-5):
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
multiple属性
允许用户输入多个值(如文件上传多选或邮箱多输入)。
<form action="action_page.php">
选择图片:<input type="file" name="img" multiple>
<input type="submit">
</form>
pattern属性
通过正则表达式验证输入格式。
<form action="action_page.php">
国家代码:<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
placeholder属性
在输入框中显示提示文本(输入内容后消失)。
<form action="action_page.php">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
required属性
标记字段为必填项(提交前必须填写)
<form action="action_page.php">
用户名:<input type="text" name="usrname" required>
<input type="submit">
</form>
step属性
定义数值输入(number、range、datetime-local 等)的合法间隔
<form action="action_page.php">
<input type="number" name="points" step="3">
<input type="submit">
</form>