html表单的用法

HTML 表单用于搜集不同类型的用户输入。
<form> 元素定义 HTML 表单,相当于表单的外壳,用于把用户输入的不同类型的数据提交到后台。

<form>元素的属性

  • name:表单的名称
  • action: 表单提交的地址
  • method:提交保单的方法有get和post,与http协议的这两种方式相对应。异同如下:
  • get将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;post是将表单中的数据放在form的数据体中,按照变量和值相对应的方式,传递到action所指向URL。

  • get是不安全的,因为在传输过程,数据被放在请求的URL中,而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中,然后放在某个地方,这样就可能会有一些隐私的信息被第三方看到。另外,用户也可以在浏览器上直接看到提交的数据,一些系统内部消息将会一同显示在用户面前。post的所有操作对用户来说都是不可见的。

  • get传输的数据量小,这主要是因为受URL长度限制;而Post可以传输大量的数据,所以在上传文件只能使用post。

  • get限制Form表单的数据集的值必须为ASCII字符;而post支持整个ISO10646字符集。

  • get是用来从服务器上获得数据,而post是用来向服务器上传递数据。

  • target:定义在何处打开action(默认:_self)

  • enctype:被提交数据的编码(默认:url-encoded)

  • application/x-www-form-urlencoded:在发送前编码所有字符(默认)

  • text/plain:空格转换为 "+" 加号,但不对特殊字符编码

  • multipart/form-data:使用包含文件上传控件的表单时,必须使用该值

<form>包含的表单元素

  1. <input>
    <input> 元素有很多形态,由type 属性定义。必须包含name属性,用于记录提交数据的名称。

type属性类型描述

  • text 常规文本输入。可用value属性定义默认值。可用 placeholder属性提升用户输入,submit提交表单时,此提示不会被提交
  • password 密码输入,字符输入后自动隐藏。可用 placeholder属性提升用户输入,submit提交表单时,此提示不会被提交
  • checkbox 复选框输入(多个选项中可选择多个选项)。同一组数据,对应的name属性相同,每个选项的值由value属性定义
  • radio 单选按钮输入(多个选项中选择一个选项)。同一组数据,对应的name属性相同,每个选项的值由value属性定义
  • file 选择文件。可原则的文件类型由accept属性定义
  • reset 重置用户输入
  • button 显示按钮,不能用于提交表单
  • submit 提交按钮(提交表单)
<input>为行内元素,在使用时用<div>将<label>和<input>包裹,实现分段效果

2.<select>
<select>元素定义下拉列表。必须包含name属性,用于记录提交数据的名称
下拉列表元素由<option>标签定义。列表通常会把首个选项显示为被选选项。可通过添加 selected 属性来定义预定义选项。列表值由value属性定义。

3.<textarea>
<textarea>元素定义多行输入字段(文本域)。必须包含name属性,用于记录提交数据的名称。行内元素。

4.<label>
<label>元素用来提示<input>、<select>、<textarea>等输入元素表头,可用for属性与属入元素id相关联,帮助输入元素聚焦鼠标输入。行内元素。

文章著作权归本人所有,转载须说明来源

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、表单 1. 表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户...
    zx9426阅读 457评论 0 1
  • 1、关于form表单的基础 form表单:是一个包含表单元素的区域;作用,用于包裹表单元素。 表单元素:是允许用户...
    tangmengyun阅读 712评论 1 1
  • 什么是form表单 表单在网页中主要负责数据采集功能,把用户填写的信息提交到网站的后台服务器。 form标签的常用...
    ezrealor阅读 280评论 0 0
  • HTML 表单:输入用户信息的单子,收集填写的信息给服务器后台例: form:定义html表单,粗浅理解为包裹表单...
    我七阅读 406评论 0 0
  • 原图 模仿 之前练了两天的线条与圆,便急匆匆地去学习下一个内容——单线稿了,画来画去,总觉得画得不像,遇到曲线依旧...
    旦与青阅读 385评论 0 0