第二次网页前端培训笔记（HTML表单标签）

学习网址：P4-P7【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

一、表单标签：

   1.  form标签
                表单标签，块级元素，会自动换行
                将数据传输给服务器。
                
                常用属性：
                action  表单提交地址ur1
                id      唯一标识
                name    名称
                target  表单提交打开方式
                method  提交方式
                        get 请求
                            参数会直接跟在ur1后面，用问号拼接
                            安全性差，传递数据量小，效率高（是post数度的两倍），有缓存
                        post请求
                            参数不会跟在ur1地址栏后面，会放在请求体重
                            安全性高，传输数据量大，效率速度慢，无缓存。

     2.input元素
                    type   表单元素类型
                          text      文本框
                          password  密码框
                          
                          radio     单选框
                          checkbox  复选框
                          button    普通按钮
                          hidden    隐藏域（用来存放需要传递给服务器，但不需要显示数据）
                          file      文件域（上传文件）
                          date      日期框
                          submit    提交按钮
                          reset     重置按钮
                          image     图文按钮
                    value  表单元素的值
                    checked  是否选中（单选框/复选框）
                    disabled 是否禁用
                    mxlength 允许输入的最大字符
                textarea 文本域
                     cols和 rows
                label标签
                     设置label标签的for属性值与表单元素的id属性值对应
                botton按钮
                     type
                        button普通按钮
                        sumbit提交按钮
                        reset重置按钮
                select下拉选项
                     <selsec name="">
                          <option value="值"文本<option/>
                    </select>
                    注：当option没设置value属性值时，提交的数据是vale对应的值
                    如果未设置value，则提交的数据是文本值

二、代码

编号：<input type="hidden" name="userId" value="1"/><br>
			<label for="userName">姓名</label>：<input type="text" value="zhangsan" id="userName" name=“userName/><br>
			<label for="userPwd">密码</label>：<input type="password" id="userPwd" name="userPwd" /><br>
			性别：男<input type="radio" name="userSex" value="man" checked="chechked" />
			      女<input type="radio" name="userSex" value="woman" checked="chechked" /><br>
			爱好：唱歌<input type="checkbox" name="userHobby" value="sing"/>
			      跳舞<input type="checkbox" name="userHobby" value="dance" checked/>
			      说唱<input type="checkbox" name="userHobby" value="rap" disabled="disabled"/><br>
			生日：<input type="date" name="userDate" /><br>
			头像：<input type="file" name="userHead"/><br>
			<label for="userTe">简介</label>:<textarea id="userTe"name="remark" rows="10">111111</textarea><br>
			 城市：
			 <select name="city">
				 <option value="">请选择城市</option>
				 <option value="Henan">河南</option>
				 <option value="Luoyang">洛阳</option>
				 <option value="Beijing">北京</option>
				 <option value="Xian">西安</option>
			 </select><br>
			 城市：
			 <select name="city" multiple="multiple" size="3">
			 				 <option >请选择城市</option>
			 				 <option value="Henan">河南</option>
			 				 <option value="Luoyang" selected="selected">洛阳</option>
			 				 <option value="Beijing"disabled="disabled">北京</option>
			 				 <option value="Xian">西安</option>
			 </select><br>
			 <input type="button" value="普通按钮"/>
			 <input type="reset" value="重置按钮"/>
			 <input type="submit" value="提交按钮"/>

三、标签的分类

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

1.块级元素

元素都从新的一行开始，并且其后的元素也另起一行；元素的高度，宽度，行高以及顶和底边的距离都可设置；元素宽度在不设置的情况下，是它本身父容量的100%（和父元素的宽度一致），除非设定一个宽度。

2.行内元素

和其他元素都在一行上，元素的高度、宽度及顶部和底部编剧不可设置；元素的宽度就是包含的文字或图片的宽度，不可改变。

3.行内块状元素

和其它元素都在一行上；元素的高度、宽度、行高以及顶和底部边距都可设置。

表单元素：所有的input、文本域、下拉框（可以操作的）