创建表单HTML的方法

什么是 HTML 表单

HTML表单需要收集不同类型的用户输入，例如姓名、电子邮件地址、电话号码等联系方式或信用卡信息等详细信息。

表单包含称为控件的特殊元素，如输入框、复选框、单选按钮、提交按钮等。用户通常通过修改其控件来完成表单，例如输入文本、选择项目等，并将此表单提交给 Web 服务器以进行进一步处理。

该<form>标签用于创建 HTML 表单。下面是一个简单的登录表单示例：

<form>
    <label>Username: <input type="text"></label>
    <label>Password: <input type="password"></label>
    <input type="submit" value="Submit">
</form>

以下部分描述了您可以在表单中使用的不同类型的控件。

输入元素

这是 HTML 表单中最常用的元素。

它允许您根据type属性指定各种类型的用户输入字段。输入元素的类型可以是文本字段、密码字段、复选框、单选按钮、提交按钮、重置按钮、文件选择框，以及HTML5 中引入的几种新输入类型。

最常用的输入类型如下所述。

文本字段

文本字段是允许用户输入文本的一行区域。

单行文本输入控件是使用一个<input>元素创建的，该元素的type属性值为text。这是用于获取用户名的单行文本输入示例：

<form>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
</form>

— 上述示例的输出将如下所示：

密码字段

密码字段类似于文本字段。唯一的区别是;密码字段中的字符被屏蔽，即它们显示为星号或圆点。这是为了防止其他人读取屏幕上的密码。这也是使用属性值为<input>的元素创建的单行文本输入控件。typepassword

这是一个用于获取用户密码的单行密码输入示例：

<form>
    <label for="user-pwd">Password:</label>
    <input type="password" name="user-password" id="user-pwd">
</form>

— 上述示例的输出将如下所示：

单选按钮

单选按钮用于让用户从一组预定义的选项中准确选择一个选项。它是使用属性值为<input>的元素创建的。typeradio

以下是可用于收集用户性别信息的单选按钮示例：

<form>
    <input type="radio" name="gender" id="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female">
    <label for="female">Female</label>
</form>

— 上述示例的输出将如下所示：

复选框

复选框允许用户从一组预定义的选项中选择一个或多个选项。它是使用属性值为<input>的元素创建的。typecheckbox

以下是可用于收集有关用户爱好的信息的复选框示例：

<form>
    <input type="checkbox" name="sports" id="soccer">
    <label for="soccer">Soccer</label>
    <input type="checkbox" name="sports" id="cricket">
    <label for="cricket">Cricket</label>
    <input type="checkbox" name="sports" id="baseball">
    <label for="baseball">Baseball</label>
</form>

— 上述示例的输出将如下所示：

文件选择框

文件字段允许用户浏览本地文件并将其作为表单数据的附件发送。诸如 Google Chrome 和 Firefox 之类的 Web 浏览器使用浏览按钮呈现文件选择输入字段，使用户能够浏览本地硬盘驱动器并选择文件。

这也是使用属性值设置为的<input>元素创建的。typefile

<form>
    <label for="file-select">Upload:</label>
    <input type="file" name="upload" id="file-select">
</form>

— 上述示例的输出将如下所示：

文本区域

Textarea 是一个多行文本输入控件，允许用户输入多行文本。多行文本输入控件是使用<textarea>元素创建的。

<form>
    <label for="address">Address:</label>
    <textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>

— 上述示例的输出将如下所示：

选择框

选择框是选项的下拉列表，允许用户从选项的下拉列表中选择一个或多个选项。选择框是使用<select>元素和<option>元素创建的。

<option>元素中的元素<select>定义了每个列表项。

<form>
    <label for="city">City:</label>
    <select name="city" id="city">
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
        <option value="cromwell">Cromwell</option>
    </select>
</form>

— 上述示例的输出将如下所示：

提交和重置按钮

提交按钮用于将表单数据发送到 Web 服务器。单击提交按钮时，表单数据将发送到表单action属性中指定的文件以处理提交的数据。

重置按钮将所有表单控件重置为默认值。通过在文本字段中输入您的姓名来尝试以下示例，然后单击提交按钮以查看它的运行情况。

<form action="action.php" method="post">
    <label for="first-name">First Name:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

在上面的文本字段中输入您的姓名，然后单击提交按钮以查看它的运行情况。

分组表单控件

<legend>您还可以使用该元素在 Web 表单中对逻辑相关的控件和标签进行分组。将表单控件分组到类别使用户更容易找到使表单更加用户友好的控件。让我们试试下面的例子，看看它是如何工作的：

<form>
    <fieldset>
        <legend>Contact Details</legend>
        <label>Email Address: <input type="email" name="email"></label>
        <label>Phone Number: <input type="text" name="phone"></label>
    </fieldset>
</form>

常用表单属性

下表列出了最常用的表单元素的属性：

以上就是关于“创建表单HTML的方法”介绍，大家如果想了解更多相关知识，不妨来关注一下动力节点的HTML教程，里面的课程内容更加全面，希望对大家能够有所帮助。