HTML 表单 category: HTML / CSS HTML 表单用于收集用户输入。用户输入通常被发送到服务器进行处理。 元素 HTML<form>元素用于创建用于用户输入的 HTML 表单： <form> . *form elements* . </form> 元素<form>是不同类型输入元素的容器，例如：文本字段、复选框、单选按钮、提交按钮等。 <input> 元素 HTML<input>元素是最常用的表单元素。 元素<input>可以通过多种方式显示，具体取决于type 属性。 文本字段 定义<input type="text">了用于文本输入的单行输入字段。 例子 带有文本输入字段的表单： <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form> 注意：表单本身不可见。另请注意，输入字段的默认宽度为 20 个字符。 元素 <label>请注意上面示例中元素的使用。 该<label>标签定义了许多表单元素的标签。 该<label>元素对于屏幕阅读器用户很有用，因为当用户聚焦于输入元素时，屏幕阅读器将大声读出标签。 该<label>元素还可以帮助那些难以单击非常小的区域（例如单选按钮或复选框）的用户 - 因为当用户单击元素内的文本时<label>，它会切换单选按钮/复选框。 for标签的属性应该<label>等于元素id的属性<input> 才能将它们绑定在一起。 单选按钮 定义<input type="radio">一个单选按钮。 单选按钮允许用户从有限数量的选项中选择一个。 例子 带有单选按钮的表单： <p>Choose your favorite Web language:</p> <form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </form> 复选框 定义<input type="checkbox">一个复选框。 复选框允许用户从有限数量的选项中选择零个或多个选项。 例子 带有复选框的表单： <form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form> 提交按钮 定义<input type="submit">一个用于将表单数据提交给表单处理程序的按钮。 表单处理程序通常是服务器上的一个文件，其中包含用于处理输入数据的脚本。 表单处理程序在表单的属性中指定action 。 例子 带有提交按钮的表单： <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> 的名称属性 请注意，每个输入字段都必须有一个name要提交的属性。 如果name省略该属性，则根本不会发送输入字段的值。 例子 此示例不会提交“名字”输入字段的值： <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" value="John"><br><br> <input type="submit" value="Submit"> </form> HTML<form>元素的不同属性。 动作属性 该action属性定义提交表单时要执行的操作。 通常，当用户单击提交按钮时，表单数据会发送到服务器上的文件。 在下面的示例中，表单数据被发送到名为“action_page.php”的文件。该文件包含一个处理表单数据的服务器端脚本： 例子 提交时，将表单数据发送到“action_page.php”： <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> 提示：如果action省略该属性，则操作将设置为当前页面。 目标属性 该target属性指定在何处显示提交表单后收到的响应。 该target属性可以具有以下值之一： ValueDescription _blankThe response is displayed in a new window or tab _selfThe response is displayed in the current window _parentThe response is displayed in the parent frame _topThe response is displayed in the full body of the window framenameThe response is displayed in a named iframe 默认值_self意味着响应将在当前窗口中打开。 ### 例子 在这里，提交的结果将在新的浏览器选项卡中打开： <form action="/action_page.php" target="_blank"> 方法属性 该method属性指定提交表单数据时要使用的 HTTP 方法。 表单数据可以作为 URL 变量（使用method="get"）或 HTTP post 事务（使用method="post"）发送。 提交表单数据时默认的HTTP方法是GET。 例子 本例在提交表单数据时使用GET方法： <form action="/action_page.php" method="get"> 例子 本例在提交表单数据时使用POST方法： <form action="/action_page.php" method="post"> GET 的注意事项： 将表单数据以名称/值对的形式附加到 URL 切勿使用 GET 发送敏感数据！ （提交的表单数据在URL中可见！） URL 的长度有限（2048 个字符） 对于用户想要为结果添加书签的表单提交很有用 GET 适用于非安全数据，例如 Google 中的查询字符串 关于 POST 的注意事项： 将表单数据附加到 HTTP 请求正文中（提交的表单数据不会显示在 URL 中） POST没有大小限制，可以用来发送大量数据。 使用 POST 提交的表单无法添加书签 提示：如果表单数据包含敏感或个人信息，请始终使用 POST！ 自动完成属性 该autocomplete属性指定表单是否应打开或关闭自动完成功能。 启用自动完成功能后，浏览器会根据用户之前输入的值自动完成值。 例子 具有自动完成功能的表单： <form action="/action_page.php" autocomplete="on"> Novalidate 属性 该novalidate属性是一个布尔属性。 如果存在，它指定提交时不应验证表单数据（输入）。 例子 具有 novalidate 属性的表单： <form action="/action_page.php" novalidate> 本章描述所有不同的 HTML 表单元素。 HTML <form> 元素 HTML<form>元素可以包含以下一个或多个表单元素： <input> <label> <select> <textarea> <button> <fieldset> <legend> <datalist> <output> <option> <optgroup> <input> 元素 最常用的表单元素之一是<input>元素。 元素<input>可以通过多种方式显示，具体取决于type 属性。 例子 <label for="fname">First name:</label> <input type="text" id="fname" name="fname"> <label> 元素 该<label>元素定义了多个表单元素的标签。 该<label>元素对于屏幕阅读器用户很有用，因为当用户聚焦于输入元素时，屏幕阅读器将大声读出标签。 该<label>元素还可以帮助那些难以单击非常小的区域（例如单选按钮或复选框）的用户 - 因为当用户单击元素内的文本时<label>，它会切换单选按钮/复选框。 for标签的属性应该<label>等于元素id的属性<input> 才能将它们绑定在一起。 <select> 元素 该<select>元素定义一个下拉列表： 例子 <label for="cars">Choose a car:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> 该<option>元素定义了一个可以选择的选项。 默认情况下，选择下拉列表中的第一项。 要定义预选选项，请将selected属性添加到该选项： 例子 <option value="fiat" selected>Fiat</option> 可见价值： 使用该size属性指定可见值的数量： 例子 <label for="cars">Choose a car:</label> <select id="cars" name="cars" size="3"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> 允许多项选择： 使用该multiple属性允许用户选择多个值： 例子 <label for="cars">Choose a car:</label> <select id="cars" name="cars" size="4"multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <textarea> 元素 该<textarea>元素定义了一个多行输入字段（文本区域）： 例子 <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> 该rows属性指定文本区域中的可见行数。 该cols属性指定文本区域的可见宽度。 这是上面的 HTML 代码在浏览器中的显示方式： 您还可以使用 CSS 定义文本区域的大小： 例子 <textarea name="message" style="width:200px; height:600px;"> The cat was playing in the garden. </textarea> <button> 元素 该<button>元素定义了一个可点击的按钮： 例子 <button type="button" onclick="alert('Hello World!')">Click Me!</button> 注意：始终指定type按钮元素的属性。不同的浏览器可能对按钮元素使用不同的默认类型。 <fieldset> 和 <legend> 元素 该<fieldset>元素用于将相关数据分组到表单中。 该<legend>元素定义该元素的标题 <fieldset> 。 例子 <form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </fieldset> </form> <datalist> 元素 该<datalist>元素指定元素的预定义选项列表<input>。 用户输入数据时将看到预定义选项的下拉列表。 list元素的属性，<input>必须引用 元素id的属性<datalist>。 例子 <form action="/action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> <output> 元素 该<output>元素表示计算的结果（如脚本执行的结果）。 例子 执行计算并在元素中显示结果<output>： <form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form> HTML<input>元素的不同类型。 HTML 输入类型 以下是您可以在 HTML 中使用的不同输入类型： <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text"> <input type="time"> <input type="url"> <input type="week"> 提示：该type属性的默认值为“text”。 输入类型 文本 <input type="text">定义 单行文本输入字段： 例子 <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form> 输入类型 密码 <input type="password">定义一个密码字段： 例子 <form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"> </form> 密码字段中的字符被屏蔽（显示为星号或圆圈）。 输入类型 提交 <input type="submit">定义一个用于将表单数据 提交到表单处理程序的按钮。 表单处理程序通常是带有用于处理输入数据的脚本的服务器页面。 表单处理程序在表单的属性中指定action ： 例子 <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> 如果省略提交按钮的 value 属性，按钮将获得默认文本： 例子 <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit"> </form> 输入类型重置 <input type="reset">定义一个重置按钮 ，它将所有表单值重置为其默认值： 例子 <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> 如果更改输入值然后单击“重置”按钮，表单数据将重置为默认值。 输入类型 radio <input type="radio">定义一个单选按钮。 单选按钮允许用户仅选择有限数量的选项之一： 例子 <p>Choose your favorite Web language:</p> <form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </form> 输入类型复选框 <input type="checkbox">定义一个复选框。 复选框允许用户从有限数量的选项中选择零个或多个选项。 例子 <form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form> 输入类型按钮 <input type="button">定义一个按钮： 例子 <input type="button" onclick="alert('Hello World!')" value="Click Me!"> 输入类型 颜色 用于<input type="color">应包含颜色的输入字段。 根据浏览器支持，颜色选择器可以显示在输入字段中。 例子 <form> <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor"> </form> 输入类型 日期 用于<input type="date">应包含日期的输入字段。 根据浏览器支持，日期选择器可以显示在输入字段中。 例子 <form> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"> </form> 您还可以使用min和max属性来添加对日期的限制： 例子 <form> <label for="datemax">Enter a date before 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">Enter a date after 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"> </form> 输入类型 日期时间-本地 指定<input type="datetime-local">日期和时间输入字段，不带时区。 根据浏览器支持，日期选择器可以显示在输入字段中。 例子 <form> <label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> </form> 输入类型 电子邮件 用于<input type="email">应包含电子邮件地址的输入字段。 根据浏览器支持情况，电子邮件地址在提交时可以自动验证。 某些智能手机可识别电子邮件类型，并在键盘上添加“.com”以匹配电子邮件输入。 例子 <form> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"> </form> 输入类型 图像 将<input type="image"> 图像定义为提交按钮。 图像的路径在src属性中指定。 例子 <form> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form> 输入类型文件 它<input type="file"> 定义了一个文件选择字段和一个用于文件上传的“浏览”按钮。 例子 <form> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"> </form> 输入类型隐藏 定义<input type="hidden"> 了一个隐藏的输入字段（用户不可见）。 隐藏字段允许 Web 开发人员包含提交表单时用户无法看到或修改的数据。 隐藏字段通常存储提交表单时需要更新的数据库记录。 注意：虽然该值不会在页面内容中向用户显示，但可以使用任何浏览器的开发人员工具或“查看源代码”功能查看（并且可以编辑）该值。不要使用隐藏输入作为安全形式！ 例子 <form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="hidden" id="custId" name="custId" value="3487"> <input type="submit" value="Submit"> </form> 输入类型 月份 允许<input type="month">用户选择月份和年份。 根据浏览器支持，日期选择器可以显示在输入字段中。 例子 <form> <label for="bdaymonth">Birthday (month and year):</label> <input type="month" id="bdaymonth" name="bdaymonth"> </form> 输入类型编号 定义<input type="number">一个 数字输入字段。 您还可以对接受的号码设置限制。 以下示例显示一个数字输入字段，您可以在其中输入 1 到 5 之间的值： 例子 <form> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form> 输入类型范围 定义<input type="range">一个用于输入数字的控件，其确切值并不重要（如滑块控件）。默认范围是 0 到 100。但是，您可以使用min、max和step属性对接受的数字设置限制： 例子 <form> <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form> 输入类型搜索 用于<input type="search">搜索字段（搜索字段的行为类似于常规文本字段）。 例子 <form> <label for="gsearch">Search Google:</label> <input type="search" id="gsearch" name="gsearch"> </form> 输入类型 电话 用于<input type="tel">应包含电话号码的输入字段。 例子 <form> <label for="phone">Enter your phone number:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form> 输入类型 时间 允许<input type="time">用户选择时间（无时区）。 根据浏览器支持，时间选择器可以显示在输入字段中。 例子 <form> <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt"> </form> 输入类型网址 用于<input type="url">应包含 URL 地址的输入字段。 根据浏览器支持情况，提交时可以自动验证 url 字段。 某些智能手机会识别 url 类型，并在键盘上添加“.com”以匹配 url 输入。 例子 <form> <label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage"> </form> 输入类型周 允许<input type="week">用户选择一周和一年。 根据浏览器支持，日期选择器可以显示在输入字段中。 例子 <form> <label for="week">Select a week:</label> <input type="week" id="week" name="week"> </form> HTML<input>元素的不同属性。 值属性 inputvalue属性指定输入字段的初始值： 例子 具有初始（默认）值的输入字段： <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form> 只读属性 inputreadonly属性指定输入字段是只读的。 只读输入字段无法修改（但是，用户可以使用 Tab 键切换到该字段、突出显示该字段并从中复制文本）。 提交表单时将发送只读输入字段的值！ 例子 只读输入字段： <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" readonly><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form> 禁用属性 inputdisabled属性指定应禁用输入字段。 禁用的输入字段无法使用且不可单击。 提交表单时，不会发送禁用输入字段的值！ 例子 禁用的输入字段： <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" disabled><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form> 尺寸属性 inputsize属性指定输入字段的可见宽度（以字符为单位）。 默认值为size20。 注意：该size属性适用于以下输入类型：文本、搜索、电话、url、电子邮件和密码。 例子 设置输入字段的宽度： <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" size="4"> </form> 最大长度属性 输入maxlength属性指定输入字段中允许的最大字符数。 注意：当设置a时maxlength，输入字段将不会接受超过指定数量的字符。但是，该属性不提供任何反馈。所以，如果你想提醒用户，你必须编写JavaScript代码。 例子 设置输入字段的最大长度： <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" maxlength="4" size="4"> </form> 最小和最大属性 输入min和max属性指定输入字段的最小值和最大值。 和min属性max适用于以下输入类型：数字、范围、日期、本地日期时间、月份、时间和星期。 提示：一起使用 max 和 min 属性可以创建合法值的范围。 例子 设置最大日期、最小日期和合法值范围： <form> <label for="datemax">Enter a date before 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">Enter a date after 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form> 多重属性 inputmultiple属性指定允许用户在输入字段中输入多个值。 该multiple属性适用于以下输入类型：电子邮件和文件。 例子 接受多个值的文件上传字段： <form> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple> </form> 模式属性 inputpattern属性指定一个正则表达式，提交表单时将根据该正则表达式检查输入字段的值。 该pattern属性适用于以下输入类型：文本、日期、搜索、url、电话、电子邮件和密码。 提示：使用全局标题属性来描述模式以帮助用户。 提示：在我们的 JavaScript 教程中了解有关正则表达式的更多信息。 例子 只能包含三个字母的输入字段（不能包含数字或特殊字符）： <form> <label for="country_code">Country code:</label> <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> </form> 占位符属性 inputplaceholder属性指定一个简短的提示，描述输入字段的预期值（样本值或预期格式的简短描述）。 在用户输入值之前，简短提示会显示在输入字段中。 该placeholder属性适用于以下输入类型：文本、搜索、url、电话、电子邮件和密码。 例子 带有占位符文本的输入字段： <form> <label for="phone">Enter a phone number:</label> <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form> 所需属性 inputrequired属性指定在提交表单之前必须填写输入字段。 该required属性适用于以下输入类型：文本、搜索、url、电话、电子邮件、密码、日期选择器、数字、复选框、单选和文件。 例子 必填输入字段： <form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> </form> 步骤属性 输入step属性指定输入字段的合法数字间隔。 示例：如果 step="3"，则合法数字可以是 -3、0、3、6 等。 提示：该属性可以与 max 和 min 属性一起使用来创建合法值的范围。 该step属性适用于以下输入类型：数字、范围、日期、本地日期时间、月份、时间和星期。 例子 具有指定合法数字间隔的输入字段： <form> <label for="points">Points:</label> <input type="number" id="points" name="points" step="3"> </form> 注意：输入限制并不是万无一失的，JavaScript 提供了很多添加非法输入的方法。为了安全地限制输入，还必须由接收者（服务器）进行检查！ 自动对焦属性 inputautofocus属性指定输入字段在页面加载时应自动获得焦点。 例子 让“名字”输入字段在页面加载时自动获得焦点： <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" autofocus><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form> 高度和宽度属性 输入height和width属性指定元素的高度和宽度<input type="image">。 提示：始终指定图像的高度和宽度属性。如果设置了高度和宽度，则在加载页面时会保留图像所需的空间。如果没有这些属性，浏览器就不知道图像的大小，也无法为其保留适当的空间。其效果是页面布局在加载期间（图像加载时）发生变化。 例子 定义一个图像作为提交按钮，具有高度和宽度属性： <form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form> 列表属性 inputlist属性指的是<datalist>包含 <input> 元素的预定义选项的元素。 例子 <datalist> 中具有预定义值的 <input> 元素： <form> <input list="browsers"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> 自动完成属性 inputautocomplete属性指定表单或输入字段是否应打开或关闭自动完成功能。 自动完成允许浏览器预测该值。当用户开始在字段中键入时，浏览器应根据先前键入的值显示填充该字段的选项。 该autocomplete属性适用于<form>以下<input>类型：文本、搜索、url、电话、电子邮件、密码、日期选择器、范围和颜色。 例子 一种 HTML 表单，可打开和关闭一个输入字段的自动完成功能： <form action="/action_page.php" autocomplete="on"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email" autocomplete="off"><br><br> <input type="submit" value="Submit"> </form> form*HTML<input>元素的不同属性。 表单属性 input属性指定元素所属的form形式。<input> 该属性的值必须等于它所属的<form>元素的id属性。 例子 位于 HTML 表单外部的输入字段（但仍然是表单的一部分）： <form action="/action_page.php" id="form1"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> </form> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname" form="form1"> 形成属性 inputformaction属性指定提交表单时将处理输入的文件的 URL。 注意：该属性会覆盖元素action的属性<form>。 该formaction属性适用于以下输入类型：提交和图像。 例子 带有两个提交按钮的 HTML 表单，具有不同的操作： <form action="/action_page.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> <input type="submit" formaction="/action_page2.php" value="Submit as Admin"> </form> formenctype 属性 inputformenctype 属性指定提交时表单数据应如何编码（仅适用于 method="post" 的表单）。 注意：此属性会覆盖元素的 enctype 属性<form>。 该formenctype属性适用于以下输入类型：提交和图像。 例子 带有两个提交按钮的表单。第一个使用默认编码发送表单数据，第二个发送编码为“multipart/form-data”的表单数据： <form action="/action_page_binary.asp" method="post"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form> form method 属性 inputformmethod 属性定义将表单数据发送到操作 URL 的 HTTP 方法。 注意：该属性会覆盖元素的 method 属性<form>。 该formmethod属性适用于以下输入类型：提交和图像。 表单数据可以作为 URL 变量 (method="get") 或 HTTP post 事务 (method="post") 发送。 关于“get”方法的注释： 此方法将表单数据以名称/值对的形式附加到 URL 此方法对于用户想要为结果添加书签的表单提交很有用 URL 中可以放置的数据量是有限制的（因浏览器而异），因此，您无法确定所有表单数据都会正确传输 切勿使用“get”方法传递敏感信息！ （密码或其他敏感信息将在浏览器的地址栏中可见） 关于“post”方法的注意事项： 此方法将表单数据作为 HTTP post 事务发送 使用“post”方法提交的表单无法添加书签 “post”方法比“get”更健壮和安全，并且“post”没有大小限制 例子 带有两个提交按钮的表单。第一个使用 method="get" 发送表单数据。第二个使用 method="post" 发送表单数据： <form action="/action_page.php" method="get"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit using GET"> <input type="submit" formmethod="post" value="Submit using POST"> </form> 表单目标属性 inputformtarget属性指定名称或关键字，指示在何处显示提交表单后收到的响应。 注意：该属性会覆盖元素的目标属性<form>。 该formtarget属性适用于以下输入类型：提交和图像。 例子 具有两个提交按钮的表单，具有不同的目标窗口： <form action="/action_page.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> <input type="submit" formtarget="_blank" value="Submit to a new window/tab"> </form> formnovalidate 属性 inputformnovalidate属性指定 <input> 元素在提交时不应进行验证。 注意：该属性会覆盖元素的 novalidate 属性<form> 。 该formnovalidate属性适用于以下输入类型：提交。 例子 具有两个提交按钮的表单（带验证和不带验证）： <form action="/action_page.php"> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> <input type="submit" formnovalidate="formnovalidate" value="Submit without validation"> </form> novalidate 属性 属性novalidate就是<form>属性。 如果存在，则 novalidate 指定在提交时不应验证所有表单数据。 例子 指定提交时不应验证任何表单数据： <form action="/action_page.php" novalidate> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form>