自学Web前端的第13天

html表单

1、概述

表单的作用：用于搜集不同类型的用户输入。

表单的组成：表单元素（控件）、表单区域。

2、表单区域

2.1 form标签

• 语法：

  <form></form>

• 作用：

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

• 注意：

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

3、表单元素

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

3.1 input标签

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

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

• 语法：

  <input type="类型">

• 常用类型

  • type="text"

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

      <input type="text" >
    

  • type="password"

    • 作用：定义密码字段

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

    • 注意：密码字段字符不会明文显示会显示为星号或实心圆

  • type="radio"

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

      <input type="radio">
    

  • type="checkbox"

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

      <input type="checkbox">
      

  • type="button"

    • 作用：定义普通按钮

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

    • 提示：value属性定义按钮显示的文本

  • type="submit"

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

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

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

  • type="reset"

    • 作用：定义重置按钮，将表单元素的value属性值重置为它最初的默认状态

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

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

  • type="image"

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

    • 属性

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

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

      • 提示：src 属性和alt 属性必须与 <input type="image"> 结合使用

          <input type="image" src="button.png" alt="开始游戏">

        • type="file"

          • 作用：用于文件上传

          <input type="file">

3.2 textarea标签

• 作用：

  定义多行输入字段（文本域）

• 语法：

  <textarea>初始值</texarea>

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

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

3.3 select标签

• 概述：

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

• 语法：

  <select name="" id=""> 
      <option value="">北京</option>
      <option value="">上海</option>
      <option value="">天津</option>
  </select>

表单元素属性

• name属性

  • 作用:定义表单元素的名称，用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据

  • 注意：name属性是必须的，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

    <input type="text" name="username">

• value属性

  • 作用：规定输入字段的初始值和修改按钮上的文字内容

    <input type="text" value="用户名">

• readonly属性

  • 作用：规定输入字段为只读（不能修改）

    <input type="text" name="username" value="请输入用户名" readonly>

• disabled 属性

  • 作用：规定输入字段是禁用的，被禁用的表单元素不能编辑也不能被提交

     <input type="text" name="username2" value="请输入用户名" disabled>

• maxlength属性

  • 作用：maxlength 属性，规定输入字段允许的最大长度

    <input type="text"  maxlength="3">

• selected 属性

  • 作用：规定<select>的选项<option>在页面加载时预先选定该选项。

     <select name="" id="">
                <option value="">北京</option>
                <option value="" selected>成都</option> //成都会作为默认选项显示
                <option value="">上海</option>
     </select>

• size属性

  • 作用：规定下拉列表中可见选项的数目

   <select name="" id="" size="2">
      <option value="">北京</option>
      <option value="" selected>成都</option>
      <option value="">上海</option>
   </select>

4、form的属性

4.1 action属性

action="数据提交地址.php,.net"

• 作用：

  表单的动作属性，定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。 可以是绝对路径或相对路径也可以是接收数数据的email邮箱地址。

• 注意：

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

4.2 target属性

• 作用：

  设置目标地址的打开方式

• 取值：

  • _self当前窗口(默认值)

  • _blank新窗口

4.3 method属性

• 作用：

  规定发送表单数据的 HTTP 方法

• 取值：

  • GET/POST

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

    post方法：将表单中的【数据放在 form 的数据体】中，按照变量和值相对应的方式，传递到 action 所指向 URL。

  get 和 post 区别（了解）： 简单阐述，当前阶段不作为重点

• 用途：

  get 从指定的资源请求数据，是用来从服务器上【获得数据】，而 POST向指定的资源提交要被处理的数据，是用来向服务器【上传递数据】

• 安全性：

  get 是【不安全的】，因为规定发送表单数据的HTTP方法一些系统内部消息将会一同显示在用户面前。post 的所有操作对用户来说都是【不可见的】

• 数据量：

  【get传输的数据量小】，这主要是因为受 URL 长度限制；而 post 可以传输大量的数据，所以上传文件只能使用 post（当然还有一个原因，将在后面的提到）。

5、表单元素标注

• 作用：

  为 input 元素定义标注（标记） 通过<label> 标签的 for 属性值与相关元素的 id 值相同，绑定表单元素

• 语法：

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

• 效果描述：

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

  <label for="usname">用户名</label><input type="text" id="usname">

6、CSS 用户界面属性

6.1 轮廓线

概述：轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

outline简写

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

• 可以设置的属性分别是（按顺序）： outline-color， outline-style， outline-width

• 说明：

  • 轮廓样式 outline-style

  • 轮廓颜色 outline-color

  • 轮廓宽度 outline-width

  • 语法：空格隔开

• 取值：参考边框

• 注意：如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

• 实例演示:

  清除与设置 input的轮廓线：

  input {
  /* 清除轮廓线 */
  outline: none;  /* 相当于 outline-style:none */
  }
  设置鼠标滑过添加外轮廓：

  div{
    float:left;
    width: 200px;
    height: 200px;
    background:#ccc;
    margin:20px;
  }