HTML表单属性2

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>