三、表单
1. form 表单
- form标记:表单元素的容器,属性action、method
- action属性:表单处理服务器,完整格式(协议的名称必须写)
- method属性:表单的提交方式(post和get)
- GET 方法,浏览器会与表单处理服务器建立连接,然后在传输步骤中发送所有的表单数据(key=value的格式):浏览器会将数据直接附在表单的 action URL(Uniform Resource Locator,统一资源定位符,俗称网络地址) 之后,URL和数据间用问号进行分隔
- POST 方法,浏览器会与表单处理服务器建立连接,并按分段传输的方法将数据发送给服务器;在服务器端,当需要POST的参数时,这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数
- 区别:
- GET在url里传送数据:安全性低、容量小,便于分享(商品等),适合获取,且会缓存;
- post安全性一般、容量几乎无限,更适合上传(图片等)
- 所有要提交数据的表单元素都应该放在form内,提交按钮提交的是整个form表单
- 伪类选择器:
:focus —获得焦点,焦点既是等待用户操作的光标
2. input 表单项
input 标记:最常用的表单元素,通过type属性区分应用- type:input的种类控件
- 文本类:
text ——文本框;password ——密码 - 选择类:
radio ——单选;checkbox ——复选 - 按钮类:submit/image——提交/图片提交;reset——重置;button——按钮
- 特殊类:file——上传;hidden——隐藏域
- name:名字,必须属性,可以用与取值和分类,提交的key
- value:值,文本和特殊类控件中作为输入框的内容;选择类空间中用来区分选项;按钮类控件中用来设置按钮的名字,提交的value
- disabled:禁用的 input 元素
- placeholder(文本类控件):文本输入提示
- readonly(文本类控件):只读的文本输入元素
- checked(选择类控件):页面加载时默认选定的 input 元素
<form action="">
<input type="text" class="text"><br>
<input type="password"><br>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">羽毛球
<br>
<input type="submit" value="提交表单"><br>
<input type="image" src="" alt="">
<input type="reset" value="重置表单"><br>
<input type="button" value="按钮"><br>
<button type="submit">表单内默认submit</button><br>
<input type="file" name="" id="">上传文件
<input type="hidden" name="">隐藏元素
</form>
<button type="button">表单外默认buttom</button>
3. 其他表单元素
-
select:下拉选框
- size属性:用来设置同时显示选项的数量
- value属性:select的value值为被选中的option的value值
-
option:选项(select的子元素)
- selected属性:用来设置下拉框的默认选项
- value属性:被选中时为select元素赋值
<select size="2">
<option value="val1">北京</option>
<option value="val2">上海</option>
<option value="val3">广州</option>
</select>
-
textarea:文本域
- cols属性:列数(不是按照中文)
- rows属性:行数
<textarea name="" id="" cols="30" rows="10"></textarea><br>
textarea{
width: 200px;
height: 200px;
resize: none;
}
-
label:表单绑定
- for属性:将值设置成某个input的id值,可以帮助input元素获取焦点。
- 将label设置成某个input元素的父元素也可以做到类似的效果,但是注意不要设置for属性
<input type="radio" name="gender" id="man"><label for="man"><span>男</span></label>
<label>
<input type="radio" name="gender"/>女
</label>
4. 样式
-
next选择器(div+p):获取满足+前面的元素的下一个兄弟元素为+后面的元素
-
cursor :改变鼠标在移入某元素上时的鼠标样式
- default:默认光标(通常是一个箭头)
- pointer:指示链接(点击手型)
- move:可移动对象(十字)
- text:指示文本(焦点光标)
- wait:等待(沙漏或者旋转)
- help:帮助(问号)
div{
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
-
resize:控制缩放,要配合overflow:auto 一块使用
- none:一般元素的默认值,不缩放
- both:textarea的默认值,缩放
- horizontal:水平方向可以缩放
- vertical:垂直方向可以缩放
-
caret-color :光标颜色:改变文本输入框的光标颜色,不会改变文字颜色 input{
caret-color: royalblue;
}
|