前端必知必会-html表单的基本使用

---

HTML 表单

HTML 表单用于收集用户输入。用户输入通常发送到服务器进行处理。

<form> 元素

HTML <form> 元素用于创建 HTML 表单以供用户输入：
<form> 元素是不同类型输入元素的容器，例如：文本字段、复选框、单选按钮、提交按钮等。

<input> 元素

HTML <input> 元素是最常用的表单元素。

<input> 元素可以以多种方式显示，具体取决于 type 属性。

以下是一些示例：

• <input type="text"> 显示单行文本输入字段
• <input type="radio"> 显示单选按钮（用于选择多个选项中的一个）
• <input type="checkbox"> 显示复选框（用于选择多个选项中的零个或多个）
• <input type="submit"> 显示提交按钮（用于提交表单）
• <input type="button"> 显示可点击按钮

文本字段

<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>

上面的 HTML 代码在浏览器中的显示方式如下：

注意：表单本身不可见。还请注意，输入字段的默认宽度为 20 个字符。

<label> 元素

请注意上例中 <label> 元素的使用。

<label> 标记定义许多表单元素的标签。

<label> 元素对于屏幕阅读器用户很有用，因为当用户将焦点放在输入元素上时，屏幕阅读器会大声读出标签。

<label> 元素还可以帮助难以点击非常小的区域（例如单选按钮或复选框）的用户 - 因为当用户点击 元素内的文本时，它会切换单选按钮/复选框。

<label> 标签的 for 属性应等于 <input> 元素的 id 属性，以将它们绑定在一起。

单选按钮

<input type="radio"> 定义单选按钮。

单选按钮让用户可以从有限数量的选项中选择一个。

示例
带有单选按钮的表单：

<p>选择您最喜欢的 Web 语言：</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>

上面的 HTML 代码将在浏览器中显示如下：

复选框

<input type="checkbox">定义复选框。

复选框允许用户从有限数量的选项中选择零个或多个选项。

示例
带有复选框的表单：

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> 我有一辆自行车</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> 我有一辆汽车</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> 我有一艘船</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>

<input> 的 Name 属性

请注意，每个输入字段都必须具有要提交的 name 属性。

如果省略 name 属性，则根本不会发送输入字段的值。

示例
此示例不会提交“First 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表单的基本使用，如有问题欢迎私信和评论