【表单】08

三、表单

1. form 表单

1. form标记：表单元素的容器，属性action、method
2. action属性：表单处理服务器，完整格式(协议的名称必须写)
3. method属性：表单的提交方式(post和get)
   • GET 方法，浏览器会与表单处理服务器建立连接，然后在传输步骤中发送所有的表单数据(key=value的格式)：浏览器会将数据直接附在表单的 action URL(Uniform Resource Locator，统一资源定位符，俗称网络地址) 之后，URL和数据间用问号进行分隔
   • POST 方法，浏览器会与表单处理服务器建立连接，并按分段传输的方法将数据发送给服务器；在服务器端，当需要POST的参数时，这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数
   • 区别：
     • GET在url里传送数据：安全性低、容量小，便于分享(商品等)，适合获取，且会缓存；
     • post安全性一般、容量几乎无限，更适合上传(图片等)
4. 所有要提交数据的表单元素都应该放在form内，提交按钮提交的是整个form表单
5. 伪类选择器：:focus—获得焦点，焦点既是等待用户操作的光标

---

2. input 表单项

1. input标记：最常用的表单元素，通过type属性区分应用
2. type：input的种类控件
   • 文本类：text——文本框；password——密码
   • 选择类：radio——单选；checkbox——复选
   • 按钮类：submit/image——提交/图片提交；reset——重置；button——按钮
   • 特殊类：file——上传；hidden——隐藏域
3. name：名字，必须属性，可以用与取值和分类，提交的key
4. value：值，文本和特殊类控件中作为输入框的内容；选择类空间中用来区分选项；按钮类控件中用来设置按钮的名字，提交的value
5. disabled：禁用的 input 元素
6. placeholder(文本类控件)：文本输入提示
7. readonly(文本类控件)：只读的文本输入元素
8. 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. 其他表单元素

1. select：下拉选框

   • size属性：用来设置同时显示选项的数量
   • value属性：select的value值为被选中的option的value值

2. option：选项(select的子元素)

   • selected属性：用来设置下拉框的默认选项
   • value属性：被选中时为select元素赋值

   <!-- 
       下拉框:
      		 - size属性：显示的个数
   -->
   <select size="2">
       <option value="val1">北京</option>
       <option value="val2">上海</option>
       <option value="val3">广州</option>
   </select>
   

   ---

3. textarea：文本域

   • cols属性：列数(不是按照中文)
   • rows属性：行数

   <!-- 
       文本域 
           - 标记里边不能填内容
           - 30: 英文30列
           - 10: 英文10行
           - resize: 控制缩放
           - none 一般元素默认值，不可以缩放
           - both 都可以缩放,textarea默认值
           - horizontal 水平方向可以缩放
           - vertical 垂直方向可以缩放
   -->
   <textarea name="" id="" cols="30" rows="10"></textarea><br>
   

   textarea{
       width: 200px;
       height: 200px;
       resize: none;
   }
   

   ---

4. label：表单绑定

   • for属性：将值设置成某个input的id值，可以帮助input元素获取焦点。
   • 将label设置成某个input元素的父元素也可以做到类似的效果，但是注意不要设置for属性

   <!-- label标签 -->
   <!-- way1 -->
   <input type="radio" name="gender" id="man"><label for="man"><span>男</span></label>
   <!-- way2:必须把for删掉 -->
   <label>
       <input type="radio" name="gender"/>女
   </label>
   

---

4. 样式

1. next选择器(div+p)：获取满足+前面的元素的下一个兄弟元素为+后面的元素

2. cursor：改变鼠标在移入某元素上时的鼠标样式

   • default：默认光标(通常是一个箭头)
   • pointer：指示链接(点击手型)
   • move：可移动对象(十字)
   • text：指示文本(焦点光标)
   • wait：等待(沙漏或者旋转)
   • help：帮助(问号)

   div{
       width: 100px;
       height: 100px;
       background-color: red;
       cursor: pointer;
   }
   

   ---

3. resize：控制缩放，要配合overflow:auto 一块使用

   • none：一般元素的默认值，不缩放
   • both：textarea的默认值，缩放
   • horizontal：水平方向可以缩放
   • vertical：垂直方向可以缩放

   ---

4. caret-color：光标颜色：改变文本输入框的光标颜色，不会改变文字颜色

   input{
       caret-color: royalblue;
   }
   

---