网页前端第二次学习笔记

学习地址：

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

表单

1.form

from标签用于为用户输入创建html表单

表单能够包含input元素，比如文字段、复选框、单选框、提交按钮等等。还可以包含text area元素等。

表单用于向服务器传输数据。form元素是块级元素，其前后会产生拆行。

常用属性：
                action 表单提交的地址url
                id     唯一标识
                name   名称
                target 表单提交的方式（当前窗口）
                method 提交方式
                    get请求（默认）
                        参数会直接跟在url后面，用问号拼接
                        安全性差，传递的数据量小，效率高，（是post速度的两倍），有缓存
                    post请求
                        参数不会直接跟在url后面，会放在请求体中
                        安全性高，传输数据量大，速度相对来说慢，无缓存

2.input

input标签用于搜集用户信息

根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等等。

常用属性：

input元素
                type   表单元素的类型
                    text 文本框
                    password 密码框
                    radio 单选框
                    checkbox 复选框
                    button 普通按钮
                    hidden 隐藏域
                    file 文件域（上传文件）
                    date 日期框
                    submit 提交按钮
                    reset 重置按钮
                    image 图片按钮
                value    表单元素的值
                checked  是否被选中
                disabled 是否禁用
                maxlength 允许输入的最大字符
              textare文本域
                cols 和rows
              label标签
                设置label标签的for属性值与表单元素的id属性值相对应，当点击label标签时，会自动给                  表单元素聚焦
              button按钮
                type
                    button普通按钮
                    submit提交按钮
                    reset重置按钮
              select下拉框
                <select name="">
                    <option value="">content</option>
                    </select>
                    
                    注：当option设置了value属性时，提交的数据时value对应的值；
                    如果未设置value，则提交的数据是文本值
                    
                    常用属性
                        value    设置值
                        selected 设置选中状态

<form action="http://www.baidu.com" method="get" id="myform" name="myform">
编号：<input type="hidden" name="userId" value="1" /><br>
			  姓名：<input type="text" name="userName" value="zhangsan" /><br>
			  密码：<input type="password" name="userPassword" value="" maxlength="6"/><br>
			  性别：男<input type="radio" name="usersex" value="man" checked="checked"/>
			        女<input type="radio" name="usersex" value="woman"/><br>
			  爱好：唱歌<input type="checkbox" name="userHobby" value="sing" checked="checked"/>
				    跳舞<input type="checkbox" name="userHobby" value="dance" />
					说唱<input type="checkbox" name="userHobby" value="rap" disabled="disabled"/><br>
			  生日：<input type="date" name="userDate" /><br>
			  头像：<input type="file" name="userHead" /><br>
			  简介：<textarea name="remark" rows="5" cols="50" />11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</textarea><br>
			  城市：<select name="city" size="5" multiple="multiple">
			  	<option value="beijing">请选择城市</option>
				<option value="beijng">北京</option>
				<option value="shanghai">上海</option>
				<option value="luoyang">洛阳</option>
				<option value="zhengzhou">郑州</option>
				<option value="zhengzhou">西安</option>
				<option value="zhengzhou">南京</option>
			  </select>
			  <br>
			  <input type="image" src="../img/2.jpg" /><br>
			  <input type="button" value="普通按钮"/>
			  <input type="reset" value="重置按钮" />
			  <input type="submit" value="提交按钮" /><br>
			  <button type="button">普通按钮</button>
			  <button type="reset">重置按钮</button>
			  <button type="submit">提交按钮</button>
		 </form>