HTML Dog
跳至导航

表单

表单用于收集用户输入的数据。它们可以用作 Web 应用程序的界面，例如，或在 Web 上发送数据。

在表单的实际 HTML 中使用的基本标签是 form、input、textarea、select 和 option。

form

form 定义了表单，在该标签内，如果您使用表单供用户提交信息（我们在此级别上假定），则需要 action 属性来告诉表单其内容将被发送到何处。

method 属性告诉表单其中的数据将如何发送，它可以具有 get 值（这是默认值），并将表单信息附加到 Web 地址，或者 post 值（本质上）会隐藏地发送表单的信息。

所以一个表单元素看起来会像这样


<form action="processingscript.php" method="post">

</form>

input

input 标签是表单世界的“主宰”。它可以有很多种形式，其中最常见的一种概述如下（请参阅 input 参考页面 以了解完整的奇特家族）。

textarea

textarea 本质上是一个大的、多行的文本框。预期的行数和列数可以通过 rows 和 cols 属性定义，尽管您可以使用 CSS 随意调整大小。


<textarea rows="5" cols="20">A big load of text</textarea>

您选择放在开始和结束标签之间的任何文本（在此示例中为“一大段文字”）将构成文本区域的初始值。

select

select 标签与 option 标签一起用于创建下拉选择框。


<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option value="third option">Option 3</option>
</select>

当表单提交时，将发送所选选项的值。此值将是所选开始和结束选项标签之间的文本，除非使用 value 属性显式指定值，在这种情况下，将发送该值。因此，在上面的示例中，如果选择了第一项，“Option 1”将被发送；如果选择了第三项，“third option”将被发送。

与复选框和单选按钮的 checked 属性类似，option 标签也可以有一个 selected 属性，以便默认情况下其中一个项已被选中，例如 <option selected>Rodent</option> 会预先选择其中的“Rodent”。

名称

上面提到的所有标签在页面上显示都会很漂亮，但如果您将表单连接到表单处理脚本，它们都会被忽略。这是因为表单字段需要名称。因此，所有字段都需要添加 name 属性，例如 <input type="text" name="talkingsponge">。

例如，挪亚方舟的联系表单可能会像下面的示例一样。（注意：此表单在没有“contactus.php”文件的情况下将无法工作，该文件在表单标签的 action 属性中声明，用于处理提交的数据）。


<form action="contactus.php" method="post">

    <p>Name:</p>
    <p><input type="text" name="name" value="Your name"></p>

    <p>Species:</p>
    <p><input name="species"></p>
    <!-- remember: 'type="text"' isn't actually necessary -->

    <p>Comments: </p>
    <p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>

    <p>Are you:</p>
    <p><input type="radio" name="areyou" value="male"> Male</p>
    <p><input type="radio" name="areyou" value="female"> Female</p>
    <p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
    <p><input type="radio" name="areyou" value="asexual"> Asexual</p>

    <p><input type="submit"></p>

</form>

呼。