表单标签

表单中有很多的输入,选择性组件,用户可以通过输入信息最终向服务器中提交数据

也就是通过表单可以将数据提交到后端中

form是表单中的一个顶级的标签,我们的表单中的组件要可以提交数据一定要让这些输入组件和选择性组件都写到form标签里面

注意: 是form而不是from

form中的action属性可以填写要访问的后端的地址

form中的method属性中可以设置get或者post

get和post都是http协议下的连接方式

input标签

input标签是一个自闭和的标签

我们说了我们使用表单就是为了将数据传输给后端,那么我们如何将数据传给后端?
- 我们就要使用到两个属性:
  ①name
  ②value
  - 我们的name属性和value属性就可以以键值对的形式将我们的数据传输给后端,而我们的input标签中就有这两个属性

当input标签的type属性指定为"text"时表示单行文本框
- 我们可以通过input标签中的placeholder显示单行文本框的默认内容 (就是一个提示信息(就是在我们还没有在当行文本框中写入信息的时候就会显示这个placeholder属性的属性值))
- 我们可以通过input标签中的readonly属性指定值为"readonly",就是设置我们的输入框只是可以读,而不可以写
- 我们也可以通过input标签中的disable属性指定值为"disable"表示我们的文本框不可以操作
  - 那么我们这里的可读文本框和不可操作文本框之间有什么联系?
    - 我们的只可读文本框和我们的不可操作文本框都是不可以输入信息的,那么我们的只可读文本框和我们的不可操作文本框之中有什么区别呐?
      - 我们的只可读文本框是可以提交信息给后端的,而我们的不可操作文本框是不可以提交信息给后端的
input标签中的type属性指定为"password"时表示密码框
- 注意: 我们通常对输入性组件都是指定value值为""
  - 因为我们的输入性组件中我们要传输的数据就是我们的用户输入的数据,而用户输入的数据是什么我们是不能确定的,所以我们对于输入性组件我们一般都是声明一下value属性为""就可以了,不需要具体的给定值,我们的value最终就是我们的用户在输入组件中输入什么值,那么value的值就会最终变成什么
当input标签中的type属性指定为"radio"时表示单选框
- 我们创建了多个单选框之后我们还是可以发现我们的多个单选框都可以选择,这个时候我们就会想,这个时候难道不是一个多选框?为什么多个单选框都可以打钩?
  - 这个时候其实是因为我们没有给多个单选框之间建立联系,这个时候我们的系统会认为我们创建的多个单选框都是相互独立的,如果我们给多个单选框之间建立了同一的联系之后我们的建立了联系的多个单选框中就只能对一个打钩了,那么如何给我们的多个单选框之间建立联系?
    - 其实这里就是通过input标签中的name属性来确定的,如果这个时候我们的多个单选框创建的时候input标签中的name属性的值是一样的,这个时候就是表示这几个单选框是对一个问题的解答,所以这几个input标签中name属性值一样的多个单选框之间就是一次只能对一个打钩
- 注意: 我们对于选择性组件我们一般都是要声明value并且指定value的值为一个具体的值的,因为我么的选择性组件中我们不是用户输入,而是用户选择,对于我们的选择性组件我们一般都是在创建这个组件的时候就指明value的值,并且我们一般都是指定一个编号,用一串连续的编号分别代表不同的选择框中的值
  - 但是我们如果是使用选择框的时候我们不指明value的值可以吗?
    - 其实也是可以的,注意,这里的value的不指定就是说的我们对value就直接不声明,如果声明了value的值为" ",那么这个时候提交的信息就会是一个空字符串,如果我们不指定value的属性值,这个时候就会输出我们的选择性组件中的内容
当input标签中的type属性指定为"checkbox"时表示多选框
- 我们的多选框就是即使我们的input标签中指定了name属性是相同的,这个时候我们也是可以进行多个多选框的勾选操作
  - 我们的多选框中会一次提交多个值
当input标签中的type属性指定为"submit"时表示是一个提交按钮
- 我们的提交按钮就是用于提交我们当前的表单中保存的信息
当input标签中的type属性指定为"reset"的时候就是表示是一个重置按钮
- 我们的重置按钮就是将我们的所有的组件的值都重新制定为默认值
当input标签中的type属性指定为"button"的时候就是表示是一个普通按钮
- 我们的普通按钮都是要加事件的(我们会在javaScript中讲)

textarea标签

textarea标签表示文本域(也就是多行文本框)
textarea标签中的cols属性用来设置文本域的列数
textarea标签中的rows属性用来设置文本域的行数
我们的文本域textarea也是属于输入性组件,我们在使用的时候也是一般声明value为""(空字符串)
- 注意:对于name肯定是要声明的,因为我们如果不声明name那么我么的数据就提交不了,如果我们不设置name,这个时候就算设置了value的值也是不会提交的
  - 我们的textarea标签中name属性肯定还是加到自己里面
我们的textarea标签是不是一个自结束标签,所以是由标签体的,所以对于我们的文本域中的默认内容我们直接写到textarea标签的标签体中就可以了

select标签

select标签表示下拉框
select标签中有一个子标签option,一个option标签就是代表着下拉框中的一个选项
- 注意: 我们的name属性是加到select标签中的,而不是加到option中的,如果name属性加到了option中那么不会提交数据
  - 这里其实我们是可以想到的,因为我们的一个下拉框就对应了一个标准,而这个下拉框中的所有的项目其实都是符合我们的下拉框中定义的标准的
- 在下拉框中我们使用selected属性表示项目是默认被选中的
  - 注意: 我们的selected属性是声明在option标签中的
    - 因为我们肯定指明默认的选项就是在选项option中设置的

我们利用上述知识就可以创建一个如下图的表单:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bIxK4QmO-1649869318624)(C:\Users\赚钱养敏敏\AppData\Roaming\Typora\typora-user-images\1649160630526.png)]

下面我们给出完成上面表的代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表单标签 我们的表单标签中的顶级标签是form标签 -->
		<form>
			<!-- 单行文本框 -->
			账号 : <input type = "text" name = "account" value=""/><br />
			<!-- 密码框 -->
			密码 : <input type = "password" name = "password" value = "" placeholder = "mysql"/><br />
			<!-- 单选框 -->
			性别 : 男<input type = "radio" name = "gender" value = "男" checked = "checked"/>
			女<input type = "radio" name = "gender" value = "女"/><br />
			<!-- 多选框 -->
			课程 : java<input type = "checkbox" name = "book" value = "java" />
			python<input type = "checkbox" name = "book" value = "python" checked = "checked"/>
			c语言<input type = "checkbox" name = "book" value = "c" /><br />
			<!-- 下拉框 -->
			省份 : <select name = "location">
				<option  value = "101" >陕西</option>
				<option  value = "102" selected = "selected">北京</option>
				<option  value = "103">辽宁</option>
			</select><br />
			<!-- 文本域 -->
			地址 : <textarea rows = "20" cols = "50" name = "dizhi" value = "">我是默认值</textarea><br />
			<!-- 提交按钮 -->
			<input type = "submit" />
			<!-- 重置按钮 -->
			<input type = "reset" />
			<!-- 普通按钮 --> 用于在Javascript中添加事件 -->
			<input type = "button" />
		</form>
	</body>
</html>

补充:

我们的文本框和密码框的默认值都是通过input标签中的placeHolder属性来指定
我们的单选框和多选框都是通过input标签中的checked = "checked"来制定,给哪个框加这个语句那么就表示哪个框是默认勾选的
我们的文本域和下拉框中默认内容直接填写到我们的标签体中就可以了
我们的下拉框的默认选中是通过option标签中的selected属性表示选中了当前项目的
- 这个selected属性是一个特殊属性,这个属性是不需要指明属性值的, 就和我们的audio标签中的controls,autoplay,loop属性是一样的,我们只需要声明就可以了,不需要指明属性值,这些属性都是不用指明属性值的
我们对于输入性组件我们一般在声明value的时候都是指明value的值为""(空字符串),但是我们对于选择性组件在我们要么就是不声明value(不声明value的时候value的值默认就是会等于选择性组件中的内容,就和我们的输入性组件指明value的时候的情况有些相似), 但是我们一般对于选择性组件都是指明value的值的,并且我们一般都是将选择新组件中的一组内容都编一个对应的码,然后用这个码来作为我们的value的值
我们可以提交数据有两个前提:
①我们的表单中的组件都是写在form标签的里面的

②我们要有name属性
- 如果没有name属性那么就不会进行提交数据,即使你使用提交按钮也提交不了