更新时间:2022-02-16 09:36:54 来源:极悦 浏览970次
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>
下表列出了最常用的表单元素的属性:
属性 | 描述 |
name | 指定表单的名称。 |
action | 指定 Web 服务器上将用于处理通过表单提交的信息的程序或脚本的 URL。 |
method | 指定浏览器用于将数据发送到 Web 服务器的 HTTP 方法。该值可以是get (默认值)和post . |
target | 指定在哪里显示提交表单后收到的响应。可能的值为_blank 、_self 和。_parent _top |
enctype | 指定将表单提交到服务器时应如何编码表单数据。仅在method 属性值为 时适用post 。 |
以上就是关于“创建表单HTML的方法”介绍,大家如果想了解更多相关知识,不妨来关注一下极悦的HTML教程,里面的课程内容更加全面,希望对大家能够有所帮助。
0基础 0学费 15天面授
Java就业班有基础 直达就业
业余时间 高薪转行
Java在职加薪班工作1~3年,加薪神器
工作3~5年,晋升架构
提交申请后,顾问老师会电话与您沟通安排学习