web 前端

一、HTML表单

学习目标

• 能够说出表单组成部分

• 掌握HTML常用表单元素

• 掌握HTML常用表单属性

概述

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

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

生活中的表单：

网页中的表单：

表单元素

1、表单元素

1、表单区域--form标签

• 语法：

  <form></form>

• 作用：

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

• 注意：

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

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

1-1 form的属性

1-1-1 action属性

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 后面，并且两者使用“?”连接】，而各个变量之间使用“&”连接。（通过地址栏提交）

    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属性取值不同，可以展示出不同的表单形式。

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

• 语法：

  语法：<input type="text" name="" value="">
  type属性:表示不同类型的表单控件
  name属性：表单的字段名，如果不设置name属性，输入框的内容无法随表单一起提交
  value属性：规定输入字段的初始值

• 常用类型

  • type="text"

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

       <input type="text"  placeholder="请输入账号">
        type='text'
        placeholder：提示信息

  • type="password"

    • 作用：定义密码字段

    • 默认掩码处理

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

  • type="radio"

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

    <input type="radio">
    <input type="radio" name="" value="">
    name属性：可以实现单选框的互斥效果，name设置的属性值要一样，即选男不能选女，选女不能选男
    value属性：必不可少的，表示选项代表的值

  • type="checkbox"

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

      <input type="checkbox">
      <input type="checkbox" name="" value="">
      name属性：name设置的属性值要一样，实现多个选项保存在同一个字段中
      value属性：必不可少的，表示选项代表的值
      checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked'

  • 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"> 结合使用，一般不建议使用

    • width:设置宽 height：设置高

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

  • type="file"

  • 作用：用于文件上传

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

    <input type="file">