前端html学习笔记--表单标签

HTML表单标签

使用表单的目的是为了收集信息
1.表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息3个部分组成
表单域：一个包含表单元素的区域
表单控件：小框/小按钮
提示信息：如身高、学历等要输入的信息
2.表单域
在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器

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

常用属性：

3.表单控件
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或选择的内容控件
<input>是一个单标签，里面的type属性是必写的！！

<form>
	用户名：<input type="text">  //text文本框，用户可以输入任意文字
	密码：<input type="password"> //password密码框，用户看不见输入的密码
	性别：男 <input type="radio">  女 <input type="radio">  //radio为小圆按钮，单选框，如果没有给定 name属性则可以实现多选
	爱好： 吃饭 <input type="checkbox">  睡觉<input type="checkbox">  打豆豆 <input type="checkbox"> 
	 //checkbox为小方按钮，复选框，即使给定name仍可以实现多选
</form>

注意：
1.name:
name的主要作用是区别不同的表单元素
要想实现单选按钮，必须使得它们有相同的name,才可以实现多选一，例如：

性别：男 <input type="radio" name="sex">  女 <input type="radio" name="sex"> //可以实现多选一

name表单元素的名字，要求单选按钮和复选框要有相同的name值。

2.若希望在输入时出现提示信息，可以使用placeholder属性，例如：

<form>
        用户名：<input type="text" placeholder="请输入用户名"> //尽量不要用value属性
</form>

若输入成功，则显示如下：

3.checked属性：
单选按钮和复选按钮可以设置checked，当页面打开时就可以默认选中这个按钮

性别：男 <input type="radio" name="sex" checked="checked">  女 <input type="radio" name="sex">

4.maxlength属性：
规定输入字段中的字符的最大长度

5.submit属性：
提交按钮。点击了提交按钮，就可以把表单域form里面的表单元素值提交给后台（提交数据）

<input type="submit" value="免费注册"> // 这里只能用value来改变名字

如图：

6.reset属性：
重置按钮可以还原表单元素初始的默认状态

<input type="reset" value="重新填写"> // 这里只能用value来改变名字

7.file属性：
可以上传文件或图片，如图：

上传头像： <input type="file">

8.label标签
label标签为input元素定义标注
label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上，即可以通过点击label内容， 将光标选择到后面对应的表单元素处
语法：

<label for="username">用户名：</label> 
<input type="text" placeholder="请输入用户名" id="username"> //for属性应当与相关元素的id属性相同