HTML - 7、表单<table> 基本结构
HTML表单是用于收集用户输入的标准方式，广泛用于登录、注册、搜索、反馈等功能。表单由标签定义，其中可以包含各种表单控件（如输入框、按钮、选择框等），用于收集用户输入的数据并提交到服务器。
HTML表单是用于收集用户输入的标准方式，广泛用于登录、注册、搜索、反馈等功能。表单由
<form>标签定义，其中可以包含各种表单控件（如输入框、按钮、选择框等），用于收集用户输入的数据并提交到服务器。HTML表单的基本结构
<form action="提交地址" method="提交方式">
<!-- 表单控件 -->
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<button type="submit">提交</button>
</form>常用表单控件
-
<input>：-
type="text"：单行文本输入框。 -
type="password"：密码输入框，输入内容会隐藏。 -
type="email"：电子邮件输入框，自动验证电子邮件格式。 -
type="number"：数字输入框。 -
type="checkbox"：复选框。 -
type="radio"：单选按钮。 -
type="submit"：提交按钮。 -
type="reset"：重置按钮。 -
type="button"：普通按钮。
-
-
<textarea>：-
多行文本输入框，适合输入较长的文本。
-
-
<select>：-
下拉选择框，用于选择一个选项。
-
-
<button>：-
按钮，可以通过
type属性定义按钮类型（如submit、reset、button）。
-
-
<label>：-
用于定义表单控件的标签，增强表单的可访问性。
-
表单属性
-
action：-
指定表单数据提交到的服务器地址。
-
示例：
action="https://example.com/submit"
-
-
method：-
指定表单数据提交的方式，通常是
GET或POST。 -
示例：
method="POST"
-
-
enctype：-
指定表单数据的编码类型，通常用于文件上传时设置为
multipart/form-data。 -
示例：
enctype="multipart/form-data"
-
示例代码
以下是一个完整的HTML表单示例，包含多种表单控件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML表单示例</title>
</head>
<body>
<h2>用户注册表单</h2>
<form action="https://example.com/submit" method="POST">
<!-- 用户基本信息 -->
<fieldset>
<legend>用户基本信息</legend>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required placeholder="请输入用户名"><br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required placeholder="请输入密码"><br><br>
<label>确认密码：<input id="mima" type="password" name="pwd" maxlength="6" placeholder="请确认密码"></label><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱地址"><br><br>
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="18" max="100"><br><br>
</fieldset>
<!-- 性别和兴趣爱好 -->
<fieldset>
<legend>性别和兴趣爱好</legend>
<label>性别：</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
<label>兴趣爱好：</label>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">阅读</label>
<input type="checkbox" id="traveling" name="hobbies" value="traveling">
<label for="traveling">旅行</label><br><br>
</fieldset>
<!-- 个人简介 -->
<fieldset>
<legend>个人简介</legend>
<label for="bio">个人简介：</label>
<textarea id="bio" name="bio" rows="4" cols="50" placeholder="请输入个人简介"></textarea><br><br>
</fieldset>
<!-- 国籍 -->
<fieldset>
<legend>国籍</legend>
<label for="country">国家：</label>
<select id="country" name="country">
<option value="cn">中国</option>
<option value="us">美国</option>
<option value="jp">日本</option>
</select><br><br>
</fieldset>
<!-- 提交和重置按钮 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>解析
-
<form>：-
定义表单，
action属性指定提交地址，method属性指定提交方式。 -
enctype属性用于文件上传时指定编码类型。
-
-
<input>：-
用于创建各种类型的输入框，如文本框、密码框、单选按钮、复选框等。
-
required属性表示该字段必填。 -
placeholder属性提供输入提示。
-
-
<textarea>：-
用于创建多行文本输入框，适合输入较长的文本。
-
-
<select>：-
用于创建下拉选择框，
<option>标签定义选项。
-
-
<label>：-
用于定义表单控件的标签，增强表单的可访问性。
for属性与控件的id属性关联。
-
-
<button>：-
用于创建按钮，
type="submit"表示提交按钮，type="reset"表示重置按钮。
-
-
<fieldset>：-
用于将表单中的相关控件分组，使表单结构更清晰。
-
每个
<fieldset>可以包含多个表单控件。
-
-
<legend>：-
用于定义
<fieldset>的标题，显示在边框的上方。 -
每个
<fieldset>只能有一个<legend>。
-
表单验证
HTML5提供了内置的表单验证功能，可以通过以下属性实现：
-
required：字段必填。 -
pattern：正则表达式验证。 -
min、max、minlength、maxlength：限制输入范围或长度。 -
type="email"、type="url"：自动验证电子邮件或URL格式。
总结
-
<form>：定义表单，包含action、method、enctype等属性。 -
常用表单控件：
<input>、<textarea>、<select>、<button>、<label>。 -
表单验证：通过HTML5属性实现简单的表单验证。
浙公网安备 33010602011771号