前端基础笔记11

# 一、HTML表单

## 学习目标

- 能够说出表单组成部分

- 掌握HTML常用表单元素

- 掌握HTML常用表单属性

## 概述

表单：采集不同类型用户输入的数据，然后发送给服务器，实现用户与服务器之间的数据交互

一个完整的表单包含：表单域，表单控件（表单元素），提示信息，共三个部分；

生活中的表单：


网页中的表单：


## 表单元素

## 1、表单元素

### 1、表单区域--form标签

- 语法：

  ```css

  <form></form>

  ```

- 作用：

  定义 HTML 表单域，是一个包含表单元素的区域。实现用户信息的收集和传递。举例说明：比如最为常见的交互操作，注册会员、跟帖留言或者文章发布等

- 注意：

  form表单实现上述操作是最为常见方式之一，也可以使用其他方式，比如ajax等

​      一个页面中可以包含多个form标签，标签之间是相互独立的，不能嵌套

#### 1-1 form的属性

#####  1-1-1 action属性

```css

action="数据提交地址"

 注意：如果省略 action 属性，则 action 会被设置为当前页面。

```

- 作用：

  把数据提交到后台或者服务器

- 注意：

  如果省略 action 属性，则 action 会被设置为当前页面。

#####  1-1-2 target属性

- 作用：

  设置目标地址的打开方式

- 取值：

  - `_self`当前窗口(默认值)

  - `_blank`新窗口

#####  1-1-3  method属性

- 作用：

  method="GET/POST":提交表单时所用的HTTP方法，默认是GET方法

- 取值：

  - GET/POST

    >  get 方法：将表单中数据的按照 variable=value 的形式，添加到 action 所指向的【 URL 后面，并且两者使用“?”连接】，而各个变量之间使用“&”连接。（通过地址栏提交）

    >

    >  ```html

    >  https://www.baidu.com/?user=11&pass=22

    >  https://www.baidu.com/?参数1=值1&参数2=值2  

    >  ```

    >

    >  

    >

    >  post方法：将表单中的【数据放在 form 的数据体】中，按照变量和值相对应的方式，传递到 action 所指向 URL。将数据隐藏在http数据流中传输（通过后台提交）

- ​    注意：name属性：如果input表单不设置name属性，输入框的内容无法随表单一起提交

### 2、input表单控件

表单元素是允许用户在表单中输入内容的标签，比如：文本域、下拉列表、单选框、复选框等。

- 概述：`<input> `标签是最重要的表单元素。type属性取值不同，可以展示出不同的表单形式。

- 作用：用来定义不同种类的输入控件

- 语法：

  ```css

  语法：<input type="text" name="" value="">

  type属性:表示不同类型的表单控件

  name属性：表单的字段名，如果不设置name属性，输入框的内容无法随表单一起提交

  value属性：规定输入字段的初始值

  ```

- 常用类型

  - type="text"

    - 作用：用于文本输入的单行输入字段

    ```html

       <input type="text"  placeholder="请输入账号">

        type='text'

        placeholder：提示信息

    ```

  - type="password"

    - 作用：定义密码字段

    - 默认掩码处理

    ```html

    <input type="password" value="密码">

    ```

  - type="radio"

    - 作用：定义单选按钮，允许用户在有限数量的选项中选择其中之一（需要指定单选按钮组）

    ```css

    <input type="radio">

    <input type="radio" name="" value="">

    name属性：可以实现单选框的互斥效果，name设置的属性值要一样，即选男不能选女，选女不能选男

    value属性：必不可少的，表示选项代表的值

    ```

  - type="checkbox"

    - 作用：定义复选框，允许用户在有限数量的选项中选择零个或多个选项

      ```html

      <input type="checkbox">

      <input type="checkbox" name="" value="">

      name属性：name设置的属性值要一样，实现多个选项保存在同一个字段中

      value属性：必不可少的，表示选项代表的值

      checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked'

      ```

  - type="submit"

    - 作用：定义用于向表单处理程序提交表单的按钮

    - 注意：省略了提交按钮的 value 属性，该按钮将显示默认文本”提交”（不同浏览器表现不同）

      ```html

       <input type="submit" value="提交按钮">

      ```

  - type="button"

    - 作用：定义普通按钮

      ```html

      <input type="button" value="按钮">

      ```

    - 提示：不能提交信息，默认没有文字

    - value属性：定义普通按钮的文字

  - type="reset"

    - 作用：清除表单控件的输入信息

      ```html

       <input type="reset" value="重置">

      ```

    - value属性：修改按钮的文字，默认是重置

  - 扩展：

  ```html

    按钮button

    <button type="submit"></button>

    默认没有文字，内容写在中间

   具有提交功能，但是在ie7及以下浏览器是没用提交功能的

                  type类型默认submit

  ```

  - type="image"

  - 作用：定义图像形式的提交按钮

  - 属性

    - src=""：指定图片地址

    - alt=""：指定替换文本

    - 提示：src 属性和alt 属性必须与 <input type="image"> 结合使用，一般不建议使用

    - width:设置宽

        height：设置高

      ```html

      <input type="image" src="./images/4.jpg" alt="图片" width="100" height="200">

      ```

  - type="file"

  - 作用：用于文件上传

    - 注意：

      要实现文件的上传，必须在form标签中添加enctype="multipart/form-data"

    ```css

    <input type="file">

    ```

#### 2-1 textarea标签

- 作用：

  用于留言板等需要输入大量文本的一个标签

- 语法：

  ```css

  <textarea>初始值</texarea>

  ```

- 注意：不能够使用value属性规定它的初始值，初始值在开始和结束标签之间设置

  ```css

   <textarea name="" id="" cols="30" rows="10">我是一个文本框</textarea>

   resize: none禁止用户手动调整多行文本域的大小

            cols属性是表示宽度

            rows属性是表示行数

  ```

#### 2-3 select标签

- 概述：

  select标签用于定义下拉列表，下拉列表种通过option标签定义选项

- 语法：

  ```html

    下拉列表

          <select name=""size="2">        

              <option value="北京">北京</option>

              <option value="上海">上海</option>

              <option value="天津">天津</option>

          </select>

          option:列表项

          value属性：必不可少的，表示选项代表的值

          selected:下拉列表的默认选中，直接在option标签中写即可，selected或者selected='selected'

          size属性：控件长度,规定下拉列表中可见选项的数目

  ```

### 3、表单元素标注

 为 input 元素定义标注（标记）

 通过<label> 标签的 for 属性值与相关元素的 id 值相同，绑定表单元素

*  作用：是扩大点击范围，提高用户体验

​       一般与单选按钮或者复选框组合使用

- 语法：

  ```html

  <label for="id名"></label>

  ```

- 效果描述：

  当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

  ```html

  <input type="radio" id="man1" name="man" value="男">

      <label for="man1">男</label>

      <input type="checkbox" name="" id="woman" value="女">

      <label for="woman">女</label>

     <label for="man">

         <input type="radio" name="sex" value="男" checked id="man">男

       </label>

  ```

### 3.表单属性

```html

       1、action 属性定义在提交表单时执行的动作。通常，表单会被提交到 web 服务器上的网页。如果省略 action 属性，则 action 会被设置为当前页面。

       2、method="GET/POST":提交表单时所用的HTTP方法，默认是GET方法

       3、checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked'

       4、selected:下拉列表的默认选中，直接在option标签中写即可，selected或者selected='selected'          5、value属性：规定输入字段的初始值。

       6、readonly属性:只读属性,只能读，不能修改

       7、disabled属性:禁用属性，表示元素不可用，不可以点击

       8、maxlength属性：允许输入的最多字符

       9、size属性：控件长度,规定下拉列表中可见选项的数目

       10、placeholder 提示用户输入信息

```

## 2、文本框和按钮不对齐现象

- input 设置左浮动 (float:left)

- 因为按钮的高度比input的高度大2px

- 垂直对齐：按钮设置高度比文本框的高度大2px

- 左右对齐:文本框和按钮设置浮动

  ```html

   input {

        /* 左右对齐 */

        float: left;

      }

      .sub {

        /* 垂直对齐 */

        /* 按钮的高度比文本框的高度大2px */

        height: 21px;

      }

  -------------------------------------------------------------------------------

  input {

        /* 左右对齐 */

        float: left;

        height: 50px;

      }

      .sub {

        /* 垂直对齐 */

      /* 文本框和按钮的高度要一样 */

        height: 56px;

       

      }

  结构：

  <input type="text" placeholder="text">

    <input type="submit" class="sub">

    <input type="button" class="sub" value="普通按钮">

    <input type="reset" class="sub">

  ```

# 二、CSS 用户界面属性

学习目标

- 掌握如何清除表单输入框的轮廓线、禁止多行文本输入框重置大小

- 掌握如何定义鼠标样式

## 轮廓线

概述：轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

​      输入框边缘外的线

outline简写

- 在一个声明中设置所有的轮廓属性。

- 可以设置的属性分别是（按顺序）：

  outline-color, outline-style, outline-width

- 说明：

  - 轮廓样式 outline-style

  - 轮廓颜色 outline-color

  - 轮廓宽度 outline-width

  - 语法：空格隔开

- 取值：参考边框

- 清除设置 input ，textarea的轮廓线

  ```css

   input, textarea {

              /* 清除轮廓线 */

              outline: none;

              /* 设置轮廓线  */

              outline: 1px solid red;

          }

  ```

## 用户界面

### 1）文本域的resize属性：用户是否可以对元素尺寸进行调整

- resize: none; 不允许用户手动调整元素的尺寸

- resize: both; 用户可以调整元素的宽度和高度

- resize: horizontal; 用户可以调整元素的宽度

- resize: vertical; 用户可以调整元素的高度

## CSS 鼠标样式

通过在CSS中，cursor属性指定鼠标指针放在一个元素边界范围内时所用的光标形状

- 常用值

  - 默认值：auto

  - default 通常是一个箭头

  - text    显示为光标

  - pointer 光标呈现为指示链接的指针（一只手）

  - move  此光标指示某对象可被移动。

- 其他值

  ```html

  e-resize  此光标指示矩形框的边缘可被向右（东）移动。

  ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。

  nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。

  n-resize  此光标指示矩形框的边缘可被向上（北）移动。

  se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。

  sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。

  s-resize  此光标指示矩形框的边缘可被向下移动（南）。

  w-resize  此光标指示矩形框的边缘可被向左移动（西）。

  text  此光标指示文本。

  wait  此光标指示程序正忙（通常是一只表或沙漏）。

  help  此光标指示可用的帮助（通常是一个问号或一个气球）。

  ```

```html

 <ul>

        <li style="cursor:auto">auto</li>

        <li style="cursor:crosshair">Crosshair</li>

        <li style="cursor:default"> Default</li>

        <li style="cursor:pointer"> Pointer</li>

        <li style="cursor:move"> Move</li>

        <li style="cursor:e-resize"> e-resize</li>

        <li style="cursor:ne-resize"> ne-resize</li>

        <li style="cursor:nw-resize"> nw-resize</li>

        <li style="cursor:n-resize"> n-resize</li>

        <li style="cursor:se-resize"> se-resize</li>

        <li style="cursor:sw-resize"> sw-resize</li>

        <li style="cursor:s-resize"> s-resize</li>

        <li style="cursor:w-resize"> w-resize</li>

        <li style="cursor:text"> text</li>

        <li style="cursor:wait"> wait</li>

        <li style="cursor:help"> help</li>

    </ul>

```