2025-02-18 10:51阅读: 2评论: 0推荐: 0

HTML - 7、表单<table> 基本结构

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属性实现简单的表单验证。

上一篇HTML - 6、表格<table>

下一篇HTML - 8、表单<table> 特定搜索功能

本文作者：别晃我的可乐

本文链接：https://www.cnblogs.com/lwehne/p/18721509

posted @ 2025-02-18 10:51 别晃我的可乐阅读(2) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

别晃我的可乐

HTML - 7、表单<table> 基本结构

HTML表单的基本结构

常用表单控件

表单属性

示例代码

解析

表单验证

总结

公告

最新随笔

我的标签

随笔分类

随笔档案

	<form action="提交地址" method="提交方式">
	<!-- 表单控件 -->
	<input type="text" name="username" placeholder="请输入用户名">
	<input type="password" name="password" placeholder="请输入密码">
	<button type="submit">提交</button>
	</form>

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