10 - 第十章：表单

表单的定义：

（此章认识一波input,有个初印象，打点儿基础，课三深造）

定义了一个区域，可以和用户交互的区域，也可以用来向web服务器提交信息！一般用来做登陆注册搜索的功能！！！

form表单的属性：

属性：

action ：一个处理这个form信息的程序所在的URL 规定向何处发送表单 （接受数据的地址）

method ：提交表单的方式
post: 表单数据会包含在表单体内然后发送给服务器. 这种只是相对get方式安全一些，但是其
实一点也不安全！更安全的别想着靠个属性值就能实现了，知识的海洋那么大，慢慢儿游把~
get: 表单数据会附加在action 属性的URI中，并以 ‘?’ 作为分隔符, 然后这样得到的 URI再
发送给服务器. 当这样做（数据暴露在URI里面）

target：指示在提交表单之后，在哪里显示收到的回复 _self默认 _blank在新窗口打开

name: 这个form的名字。HTML5中，一个文档中的多个form当中，name必须唯一而不仅
仅是一个空字符串。

表单元素/交互控件：

为基于Web的表单创建交互式控件，以便接受来自用户的数据。大部分用input标签来定义
表单元素！决定表单元素的类型的取决于type属性！

可用的类型如下所示：
文本框：

type 表单控件的类型
name 与表单数据一起提交的控件的名称。
value 控件的初始值。该属性是可选的，除非type属性的值为radio或checkbox。
placeholder 向用户提示可以在控件中输入的内容。占位符文本不得包含回车符或换行符。

  <input type='' name='' value='' placeholder=''>

密码框：

password：其值被遮蔽的单行文本字段

  <input type='password' name='password' value='' placeholder=''>

radio 单选按钮

radio：一个单选按钮，允许从多个选项中选择一个值。 要注意name值必须要相同的

  <form>
      <input type='radio' name='sex' value='' id='man'><label for='man'></l
  abel>
      <input type='radio' name='sex' value=''>
      <input type='radio' name='sex' value=''>
  </form>

label 关联（重要）

通常关联一个控件，或者是将控件放置在label元素内，或者是用作其属性。

checkbox 多选按钮

checkbox：允许选择/取消选择单个值的复选框。
可能属性
checked 默认选中一项目
disabled 禁用某项

提交按钮

submit：提交表单的按钮。

重置按钮

reset：一个按钮，将表格的内容重置为默认值。

上传按钮
file：让用户选择文件的控件。（真正文件上传效果没那么简单，请课程三深造）

  <input type="file" >

隐藏

hidden：未显示但其值已提交给服务器的控件。（不想用户看到的暗中数据交互）

图片控件

image：一个图形提交按钮。您必须使用src属性来定义图像的来源，并使用alt属性来定义
替代文字。您可以使用高度和宽度属性以像素为单位定义图像的大小。（然而现现在基本
也不使用）

   <input type='image' src='' name='' width='' height='' border='' >

--------------------------------------非input控件-------------------------------

textareas 文本域

表示一个多行纯文本编辑控制。

  <textarea name="textarea"rows="10" cols="50">Write something       
  here</textar
  ea>

1. rows属性定义 高度
2. cols属性定义 宽度
3. resize 调整尺寸样式属性 none/vertical/horizontal

---

select下拉选框

可选样式：
size 默认显示几行

option 下拉选项

用于定义在 <select> 元素中包含的项。
可选样式
disabled 禁用某项
selected 规定在select里面默认展示项
Value 1
Value 2
Value 3

---

---

fieldset 给表单分组

通常用来对表单中的控制元素进行分组,要写在form元素里面。

legend

代表一个用于表示它的父元素 <fieldset> 的内容的标题。

表单伪类：

1. :focus

表示获得焦点的元素（如表单输入）。

• focus 适用于所有能获取焦点的元素

  <input type="text" >
   input:focus{
        outline: red dashed 1px;
        outline-offset: 5px;
    }

image.png

css屏蔽输入：<input style="ime-mode: disabled">
disabled="true"此果文字会变成灰色，不可编辑。
readOnly="true"文字不会变色，也是不可编辑的
onfocus=this.blur()当鼠标放不上就离开焦点
<input type="text" name="input1" value="中国" onfocus=this.blur()>

有两种方法

第一：disabled="disabled" 这样定义之后被禁用的 input 元素既不可用，也不可点击。
第二：readonly="readonly" 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本；

        input:enabled{width:;height:;}（粗略记忆）
        /*选择能被操作的input 可以输入可以被用户操作的input元素*/
        <input type='text' />

---

        input:disabled{width:;height:;}（粗略记忆）
        /*选择不能被操作的input*/
        <input type='text' disabled='disabled' />

---

4、checked适用于 多选单选

    input:checked + p{background:red;}（重点记忆）
    /*选择可以被选中的input 需要注意的是针对radio 和 checkbox */
    <input type='checkbox' />

opacity（css3） 透明度

1、opacity 属性设置元素的不透明级别

A 标准不透明度：opacity:0~1;
从 0（完全透明）
到 1（完全不透明）
opacity 写法 取值0­1 兼容问题 ie8以下不识别

兼容ie8以下 ：使用IE 滤镜（兼容IE下不支持opacity的版本）：

filter:alpha(opacity = 0~100);
从 0（完全透明）
到 100（完全不透明）

2、opacity与rgba的区别 完全不一样的概念 希望不要混淆

rgba是透明颜色，顶多控制一个元素的背景颜色，父透子不透
opacity是控制整个元素的透明程度，父透子也透

修改 input 编辑问题

1、disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 <input type="hidden"> 一起使用

ele.disabled = true;  禁用
ele.disabled = false;  关闭

2、readonly 属性规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。后台会接收到传值. readonly 属性可以防止用户对值进行修改。

readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。
示例：<input type="text" readonly="readonly">

ele.readOnly = true;  禁用
ele.readOnly = false;  关闭

3、readonly unselectable="on"该属性跟 disable 类似，input 元素，不可编辑，不可复制，不可选择，不能接收焦点，设置后文字的颜色也会变成灰色，但是后台可以接收到传值。

<input type="text"  readonly unselectable="on" >