HTML表单元素

一、表单元素

1、表单区域--form标签

语法:   <form></form>

 作用：

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

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

1-1form的属性:

(1)action属性:    action="数据提交地址"

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

1-1-2target属性

(1)target属性:

作用:

设置目标地址的打开方式

取值:

(1)_self当前窗口(默认值)

(2)_blank新窗口

1-1-3method属性

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

取值:GET/POST

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

2、input表单控件

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

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

(2)作用:用来定义不同种类的输入控件

(3)语法:  <input    type=" text"  name="   "  value="  ">

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

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

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

常用:

type="submit" 

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

注意:省略了提交按钮的value属性,该按钮将显示默认的文本"提交"(不同种类的浏览器表现不同)

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

type="button"

作用:定义普通按钮

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

提示:不能提交信息,默认没有文字

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

type=" reset"

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

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

value属性: 修改按钮的文字,默认是重置

拓展:

按钮  button

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

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

具有提交功能,但是在ie7级以下浏览器是没有提交功能的

   type类型默认submit

type="image"

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

属性:

src=" " : 指图片地址

alt=" " :指定替换文本

提示: src属性和alt属性必须与<input  type="image">结合使用,一般不介意使用

2-1  textarea标签

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

语法:     <textarea>初始值</textarea>

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

<textarea name="" id="" cols="30" rows="10">我是一个文本框</textarea>
   resize: none禁止用户手动调整多行文本域的大小
            cols属性是表示宽度
            rows属性是表示行数

 2-3 select标签

(1) 概述：   select标签用于定义下拉列表，下拉列表种通过option标签定义选项

语法：

 下拉列表
          <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 值相同，绑定表单元素

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

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

- 语法：

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

- 效果描述：

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

  <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.表单属性
       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

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

   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    此光标指示某对象可被移动。

- 其他值

  
  e-resize    此光标指示矩形框的边缘可被向右（东）移动。
  ne-resize    此光标指示矩形框的边缘可被向上及向右移动（北/东）。
  nw-resize    此光标指示矩形框的边缘可被向上及向左移动（北/西）。
  n-resize    此光标指示矩形框的边缘可被向上（北）移动。
  se-resize    此光标指示矩形框的边缘可被向下及向右移动（南/东）。
  sw-resize    此光标指示矩形框的边缘可被向下及向左移动（南/西）。
  s-resize    此光标指示矩形框的边缘可被向下移动（南）。
  w-resize    此光标指示矩形框的边缘可被向左移动（西）。
  text    此光标指示文本。
  wait    此光标指示程序正忙（通常是一只表或沙漏）。
  help    此光标指示可用的帮助（通常是一个问号或一个气球）。
  

 <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>