HTML-3.4 表单form

Yvonne爱编码

已于 2025-05-14 16:20:24 修改

阅读量840

点赞数 10

分类专栏：前端文章标签： html 前端 HBuilder html5 github

于 2025-05-14 11:45:17 首次发布

本文链接：https://blog.csdn.net/HRDMN/article/details/147949237

版权

前端专栏收录该内容

11 篇文章

订阅专栏

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

系列文章目录

HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号

HTML-2.1 文本字体样式之加粗、斜体、回车、下划线、上标标签、下标标签以及字号变小和变大

HTML-2.2 列表--无序列表、有序列表、定义列表

HTML-2.3 超链接-外部链接，内部链接，书签链接

HTML-2.4 滚动字幕marquee

HTML-3.1 表格table

HTML-3.2 表格的跨行跨列（课表制作实例）

HTML中应用CSS样式的三种常见方法

HTML-3.3 表格布局（学校官网简易布局实例）

2. 单选按钮 (radio) 和复选框 (checkbox)

4、表单分组 (fieldset 和 legend)

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、表单 Form详解

HTML 表单 (<form>) 是网页中用于收集用户输入的重要元素，允许用户输入文本、选择选项、上传文件等，并将这些数据提交到服务器进行处理。

1、基本结构

<form action="/submit" method="post">
  <!-- 表单控件放在这里 -->
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

2、主要属性

action - 指定表单数据提交的URL
method - 提交数据时使用的HTTP方法（通常是get或post）
enctype - 指定表单数据编码方式（用于文件上传时需要设置为multipart/form-data）
target - 指定服务器响应显示的位置（如_blank在新窗口打开）
autocomplete - 控制表单是否启用自动填充功能

3、常用表单控件

1. 输入框 (input)

<input type="text" name="username" placeholder="用户名">
<input type="password" name="pwd" placeholder="密码">
<input type="email" name="email" placeholder="邮箱">
<input type="number" name="age" min="1" max="120">
<input type="date" name="birthday">
<input type="file" name="avatar" accept="image/*">
<input type="hidden" name="token" value="abc123"> <!-- 隐藏字段 -->

2. 单选按钮 (radio) 和复选框 (checkbox)

<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女

<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动

3. 下拉选择框 (select)

<select name="city">
  <option value="bj">北京</option>
  <option value="sh" selected>上海</option>
  <option value="gz">广州</option>
</select>

4. 多行文本框 (textarea)

<textarea name="message" rows="4" cols="50" placeholder="请输入留言..."></textarea>

5. 按钮

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('点击')">普通按钮</button>

6. 标签 (label)

<label for="username">用户名:</label>
<input type="text" id="username" name="username">

<!-- 或者 -->
<label>
  <input type="checkbox" name="agree"> 我同意协议
</label>

4、表单分组 (fieldset 和 legend)

<fieldset>
  <legend>用户信息</legend>
  <!-- 表单控件 -->
</fieldset>

5、数据验证

HTML5 提供了内置的表单验证功能：

<input type="text" name="username" required minlength="3" maxlength="20">
<input type="email" name="email" required>
<input type="number" name="age" min="18" max="100">
<input type="url" name="website">
<input type="pattern" name="phone" pattern="[0-9]{11}" placeholder="11位手机号">

6、样式和布局

可以使用CSS美化表单：

form {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

input, textarea, select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

7、现代表单技术

HTML5 表单 API - 包括日期选择器、颜色选择器、范围滑块等
FormData 对象 - 用于通过JavaScript构建表单数据
AJAX 表单提交 - 使用XMLHttpRequest或Fetch API异步提交表单
表单验证API - 自定义验证逻辑

8、示例：完整表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		<form action="/register" method="post" enctype="multipart/form-data">
		  <fieldset>
		    <legend>用户注册</legend>
		    
		    <div>
		      <label for="username">用户名:</label>
		      <input type="text" id="username" name="username" required minlength="3">
		    </div>
		    
		    <div>
		      <label for="pwd">密码:</label>
		      <input type="password" id="pwd" name="password" required>
		    </div>
		    
		    <div>
		      <label>性别:</label>
		      <input type="radio" id="male" name="gender" value="male" checked>
		      <label for="male">男</label>
		      <input type="radio" id="female" name="gender" value="female">
		      <label for="female">女</label>
		    </div>
		    
		    <div>
		      <label for="city">城市:</label>
		      <select id="city" name="city">
		        <option value="bj">北京</option>
		        <option value="sh">上海</option>
		        <option value="gz">广州</option>
		      </select>
		    </div>
		    
		    <div>
		      <label><input type="checkbox" name="agree" required> 我同意用户协议</label>
		    </div>
		    
		    <button type="submit">注册</button>
		    <button type="reset">重置</button>
		  </fieldset>
		</form>
		
	</body>
</html>

表单是Web开发中用户交互的核心组件，掌握表单的使用对于构建功能完善的网站至关重要。

二、代码实例

代码实例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单form</title>
		<!-- 表单框架form -->
		<style type="text/css">
			img{
				position: absolute;
				left: 45%;
				top: 300px;
				width: 100px;
			}
			
		</style>
	</head>
	<body>
		<!-- 表单框架form -->
		<!-- action数据处理文件 -->
		<!-- method数据传输方式 post get -->
		<!-- <form action="hello.php" method="get">
		</form>-->
		<!-- input type类型 -->
		<!-- 边框fieldset 领域设置-->
		<!-- placeholder提示 disabled 只读 -->
		<!-- 单选框radio 设置同样的name -->
		<!-- 设置默认值checked=“checked” -->
		<!-- 下拉列表select option 设置默认值 selected="selected" -->
		<!-- 下拉列表为一组 select optgroup option -->
		<form action="hello.php" method="post" enctype="multipart/form-data"> <!-- 表单使用POST方法将数据提交到hello.php，使用<fieldset>和<legend>对表单内容进行分组和标题设置 -->
			<!-- enctype="multipart/form-data"用于指定表单数据在提交到服务器时的编码方式。这个属性特别重要，尤其是在表单需要上传文件时 -->
			<legend>个人信息调查表</legend>
			<fieldset >
				<legend>个人信息调查表</legend> 
	<!-- <legend> 元素用于为 <fieldset> 分组提供一个标题或描述。这个标题通常显示在 <fieldset> 的边框上，帮助用户理解该分组的目的 -->
				<label for="xm">1.姓名：</label>
				<input type="text" name="请输入你的姓名" id="xm"  /><br>
	<!-- 有一个文本输入框用于输入姓名，name属性使用了中文，虽然可以工作，但建议使用英文，使用了<label>标签关联输入框，提高了可访问性 -->
				2.账号：<input type="text" disabled="disabled" /><br> <!-- 禁用的文本输入框，用户无法修改 -->
				3.密码：<input type="password"  /><br>  <!-- 密码输入框，输入内容会显示为圆点或星号 -->
				4.性别：男生<input type="radio" name="xb"  value="1" /> 
				女生<input type="radio" name="xb"  value="0" /><br>
				<!-- 两个单选按钮共享相同的name属性，实现互斥选择，分别设置了不同的value值 -->
				5.兴趣爱好：唱歌<input type="checkbox" name="hobby"  value="11" />
				跳舞<input type="checkbox" name="hobby"  value="22" />
				打篮球<input type="checkbox" name="hobby"  value="33" /><br>
				<!-- 三个复选框，可以多选，共享相同的name属性，但通常建议为每个复选框使用不同的name或使用数组形式命名 -->
				6.出生日期:<input type="date" /><br>
				<!-- 使用了HTML5的日期选择器，下面的注释中展示了其他日期时间相关的输入类型 -->
				<!-- 6.出生日期:<input type="date-time" /> -->
				<!-- 6.出生日期:<input type="datetime-local" /> -->
				7.范围：0 <input type="range" value="10" />100 <br> <!-- 范围滑块，默认值为10，范围0-100 -->
				8.上传文件：<input type="file"  /><br> <!-- 文件上传控件 -->
				9.email:<input type="email" /><br>   <!-- 邮箱输入框，浏览器会进行基本的邮箱格式验证 -->
				10.地址：<!-- 两个下拉选择框，第二个下拉框使用了<optgroup>对选项进行分组 -->
				<select name="">         
					<option value="">临汾市</option>
					<option value="">大同市</option>
					<option value="" selceted="selected">太原市</option>
					<option value="">晋中市</option>
				</select>
				<select name="">
					<optgroup label="山西省">
						<option value="0359">临汾市</option>
						<option >大同市</option>
						<option value="0351">太原市</option>
						<option >晋中市</option>
					</optgroup>
					<optgroup label="陕西省">
						<option>西安市</option>
						<option >宝鸡市</option>
						<option selected="selected">渭南市</option>
					</optgroup>
				</select>
				<br>
				11.意见：<!-- 多行文本输入区域，设置了3行高和30列宽 -->
				<textarea name="" rows="3" cols="30"></textarea>
				<br>
				12.提交三种方式button submit images 
				<!-- 四种按钮：普通按钮(button)、提交按钮(submit)、图片提交按钮(image)、重置按钮(reset) -->
				<br>
				<input type="button" name="" id="" value="button" />
				<input type="submit" name="" id="" value="submit" />
				<input type="image" src="../img/提交.webp" width="50px" />
				<!-- button可以调用其他方法和事件 -->
				<!-- submit只可以提交 image相当于submit -->
				<input type="reset" name="" id="" value="重置按钮" /><br>
				
				
			</fieldset>
			
		</form>
		
	</body>
</html>

代码运行：