表单标签

表单标签在网页中用于创建交互式表单，允许用户输入和提交数据，是收集用户信息的重要工具。

form表单域

<form> 标签用于创建一个请求，并发送用户输入的数据到服务器。

<form
	action="url地址"
	method="提交方式"
	name="表单域名称"
>
	各种表单元素控件
</form>

标签属性详解

属性	说明
action	定义表单提交数据的服务端处理URL。 当用户提交表单时，浏览器会根据 action 和 method 属性，使用对应的 HTTP 请求将表单数据发送到这个URL地址。
method	定义表单数据提交的方法，通常是get或post。
enctype	定义表单数据的编码类型，常用于文件上传。 application/x-www-urlencoded：默认值，适用于大多数表单提交 multipart/form-data：适用于包含文件输入的表单 text/plain：发送纯文本格式的数据（通常不使用）
target	定义表单提交后响应加载的目标上下文。 _self：在当前窗口/框架中加载响应（默认） _blank：在一个新的窗口或标签中加载响应 _parent：在父框架中加载响应 _top：在整个窗口中加载响应
autocomplete	定义浏览器是否在表单上启用自动填充。
novalidate	如果存在，则提交时不会进行验证。
name	用于指定表单的名称，以区分同一页面中的多个表单域。

input标签

<input> 标签在 HTML 中用于创建交互式表单元素，供用户输入数据，

<input
	type="属性值"
	name="名字"
	value="默认值"
	placeholder="占位符，起提示作用"
/>

表单中的name和value属性

在HTML表单中，<input>标签的name和value属性对于数据的收集和处理至关重要。它们共同定义了表单数据的键值对，确保数据能够被后端正确识别和处理。

常用的type属性

input类型

type值	说明
text	单行文本输入框。默认类型
password	单行密码输入框，输入内容会以点或星号（或其他符号）掩盖
number	用于数字输入，可以设置最小值、最大值和步长
file	用于选择文件进行上传
checkbox	复选框，可以选择一个或多个选项
radio	单选按钮，必须成组使用，只有设置 name 属性才会有分组功能，有相同 name 属性值的单选按钮为一组，每组中最多只能选择一个选项。
submit	提交按钮，提交表单数据
reset	重置按钮，重置表单中所有控件为初始值
hidden	隐藏的输入域，不显示在页面上，但数据会被提交

select下拉菜单

下拉菜单是一种用于提供多个选项供用户选择的控件，通常使用 <select> 标签来创建。

<select name="options" multiple>
	<optgroup label="城市" disabled>
		<option selected>北京</option>
		<option disabled>上海</option>
		<option>广州</option>
		<option>深圳</option>
	</optgroup>
</select>

textarea文本域

<textarea> 标签用于创建多行文本输入区域，适用于获取长文本输入。

<textarea
	name="文本域名称"
	rows="行数"
	cols="列数"
	placeholder="占位符"
	readonly
	disabled
	maxlength="可输入的最大字符数"
	wrap="文本的换行方式，soft软换行（文本提交时不包含换行符），hard硬换行（文本提交时包含换行符）"
>
文本内容（默认值）</textarea>

禁用拖拽调整大小

textarea {
  resize: none; /* none：禁用拖拽大小、vertical：仅允许垂直方向调整大小、horizontal：仅允许水平方向调整大小 */
}

label标签

<label> 标签用于为表单控件定义标注，并提供一种方便用户点击标签来聚焦或选中相应表单控件的机制。

<!-- 内嵌式 -->
<label>用户名：<input type="text" name="username"></label>

<!-- for属性方式（最佳实践） -->
<label for="username">用户名：</label>
<input id="username">

button标签

<button> 标签用于创建按钮。

<button type="submit"></button>

常用的type属性

type属性值	说明
submit	提交按钮。点击之后提交数据会给后端服务器。
reset	重置按钮。点击之后恢复表单默认值。
button	普通按钮。默认无功能，之后配合添加功能。 chrome浏览器中button默认是提交按钮。

禁用和只读属性

• readonly：使表单控件变为只读状态，表单提交时值会被提交。
• disabled：禁用表单控件，被禁用的控件在表单提交时不会包含在提交的数据中。