HTML 设计表单

htmlweb developmentfront end technology更新于 2025/11/25 7:40:17

当您想要收集网站访问者的数据时，需要使用 HTML 表单。例如，在用户注册期间，您需要收集姓名、电子邮件地址、信用卡号等信息。

表单会接收网站访问者的输入，然后将其提交到后端应用程序，例如 CGI、ASP 脚本或 PHP 脚本等。后端应用程序将根据应用程序内部定义的业务逻辑对传递的数据执行必要的处理。

<form> 标签用于在 HTML 中创建表单，其中包含各种表单元素，例如输入框、文本区域等。−

<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

要创建表单，您需要添加字段，例如文本、密码、出生日期字段、电话、电子邮件、按钮等。所有这些我们都可以添加 <input> 元素 −

Sr.No	类型和描述
1	text 一个自由格式的文本字段，名义上没有换行符。
2	password 一个用于输入敏感信息的自由格式文本字段，名义上没有换行符。
3	checkbox 一组来自预定义列表的零个或多个值。
4	radio 一个枚举值。
5	submit 一个自由格式的按钮，用于启动表单提交。
6	file 一个任意文件，具有 MIME 类型和可选的文件名。
7	image 一个相对于特定图像大小的坐标，具有额外的语义，即它必须是最后一个选择的值，并启动表单提交。
8	hidden 一个通常不会显示给用户的任意字符串。
9	select 枚举值，与单选按钮类型类似。
10	textarea 自由格式的文本字段，名义上没有换行限制。
11	button 自由格式的按钮，可以触发任何与按钮相关的事件。

但是，HTML5 为 <input> 元素引入了更多选项 −

Sr.No	类型和描述
1	datetime 根据 ISO 8601 编码的日期和时间(年、月、日、时、分、秒、秒的小数部分)，时区设置为 UTC。
2	datetime-local 根据 ISO 8601 编码的日期和时间(年、月、日、时、分、秒、秒的小数部分)，不包含时区信息。
3	date 根据 ISO 8601 编码的日期(年、月、日)。
4	month 根据 ISO 8601 编码的包含年份和月份的日期。
5	周由年份和周数组成的日期，符合 ISO 8601 编码。
6	time 根据 ISO 8601 编码的时间(小时、分钟、秒、秒的小数部分)。
7	number 它仅接受数值。step 属性指定精度，默认为 1。
8	range range 类型用于应包含数字范围内值的输入字段。
9	email 它仅接受 email 值。此类型用于应包含电子邮件地址的输入字段。如果您尝试提交简单文本，系统会强制您仅输入 email@example.com 格式的电子邮件地址。
10	url 它仅接受 URL 值。此类型用于应包含 URL 地址的输入字段。如果您尝试提交简单文本，系统会强制您仅输入 http://www.example.com 格式或 http://example.com 格式的 URL 地址。

示例

现在让我们看一个创建表单的示例−

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..."><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob"><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..."><br><br>
<button type="submit" value="Submit">Submit</button>
</form>
/body>
</html>

输出

这将产生以下输出 −

示例

现在，我们将看到另一个示例，其中我们正在创建一个表单，其中一个字段是复选框 −

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

这将产生以下输出 −