HTML表单基本使用

HTML表单

HTML是一个包含表单元素的区域,用于搜集不同类型的用户输入,以提交给后台。
表单元素是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。


常见的标签介绍

form标签用于定义表单,包含了表单元素。

form标签有四个属性

  • action: 表单提交的地址
  • method:提交表单的方法,一般有get和post两种(区别见附录)。
  • target:在何处打开action
  • _blank :在新窗口中打开。
  • _self :(默认)在相同的框架中打开。
  • _parent :在父框架集中打开。
  • _top :在整个窗口中打开。
  • framename:在一个name属性为framename的框架中打开。
  • enctype: 编码方式
  • application/x-www-form-urlencoded:在发送前编码所有字符(默认)
  • text/plain:空格转换为 "+" 加号,但不对特殊字符编码
  • multipart/form-data:使用包含文件上传控件的表单时,必须使用该值
form elements

input标签可通过type属性来设置不同的input类型

  • 文本/密码

  • 一般不设置value,value值为用户输入的值

  • placeholder属性,用于在输入框内给用户提供提示文字,帮助用户填写输入字段,不影响实际value值。用户输入值后会消失。

    
     
    
  • 单选/复选框

  • 同一组数据的name值需保持相同

  • label元素的for属性值与关联元素id值保持一致,则点击label 元素内文本,浏览器就会自动将焦点转到和标签相关的表单控件上。

  • 必须设置value值,否则选中项的值无法提交

    
    
    
    
    
    
    
    
    
  • 文件

  • accept属性:可接受的文件类型

    
    
  • 按钮

    
    
    
    
    
    
    
  • 隐藏域

  • 提交数据但前台不显示

     
    

select标签定义下拉列表

  • 配合option标签使用
  • option元素的selected属性设为selected则该子项在页面中默认选中
  • 各option元素需设置value以提交数据

textarea标签定义多行文本



附录

1. post 和 get 方式的区别?

  • GET方法

  • 查询字符串(名称/值对)是在 GET 请求的 URL 中发送的

  • 受限于url的最大长度2048个字符.

  • 只允许 ASCII 字符。

  • 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分,对所有人可见。因此在发送密码或其他敏感信息时绝不要使用 GET !

    /test/demo_form.asp?name1=value1&name2=value2
    
  • POST方法

  • 查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的

  • 对数据类型、长度均无限制

  • 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。

    POST /path/script.cgi HTTP/1.0
    From: [email protected]
    User-Agent: HTTPTool/1.0
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 32
    
    home=Cosby&favorite+flavor=flies
    
  • 使用场景
    (1)如果表单正在更新数据,或者包含敏感信息(例如密码)时,最好是用POST。POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。
    (2)如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息时使用GET。GET适合少量数据的提交,因为浏览器会设定容量限制。

你可能感兴趣的:(HTML表单基本使用)