6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

html笔记08-form表单元素01

2022-04-15 0 23 web前端社区

6.jpg 0 前端程序猿

表单标签

表单(form)是用户输入信息与网页互动的一种形式。大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单。
表单由一种或多种的小部件组成,比如输入框、按钮、单选框或复选框。这些小部件称为控件(controls)。

form

简介

<form>标签用来定义一个表单,所有表单内容放到这个容器元素之中。

  1. <form>
  2. <!-- 各种表单控件-->
  3. </form>

上面代码就是表单的基本形式。

比较常见的例子。

  1. <form action="https://example.com/api" method="post">
  2. <label for="POST-name">用户名:</label>
  3. <input id="POST-name" type="text" name="user">
  4. <input type="submit" value="提交">
  5. </form>

上面代码就是一个表单,一共包含三个控件:一个<label>标签,一个文本输入框,一个提交按钮。其中,文本输入框的name属性是user,表示将向服务器发送一个键名为user的键值对,键值就是这个控件的value属性,等于用户输入的值。

用户在文本输入框里面,输入用户名,比如foobar,然后点击提交按钮,浏览器就会向服务器https://example.com/api发送一个 POST 请求,发送user=foobar这样一段数据。

<form>有以下属性。

  • accept-charset:服务器接受的字符编码列表,使用空格分隔,默认与网页编码相同。
  • action:服务器接收数据的 URL。
  • autocomplete:如果用户没有填写某个控件,浏览器是否可以自动填写该值。它的可能取值分别为off(不自动填写)和on(自动填写)。
  • method:提交数据的 HTTP 方法,可能的值有post(表单数据作为 HTTP 数据体发送),get(表单数据作为 URL 的查询字符串发送),dialog(表单位于<dialog>内部使用)。
  • enctype:当method属性等于post时,该属性指定提交给服务器的 MIME 类型。可能的值为application/x-www-form-urlencoded(默认值),multipart/form-data(文件上传的情况),text/plain
  • name:表单的名称,应该在网页中是唯一的。注意,如果一个控件没有设置name属性,那么这个控件的值就不会作为键值对,向服务器发送。
  • novalidate:布尔属性,表单提交时是否取消验证。
  • target:在哪个窗口展示服务器返回的数据,可能的值有_self(当前窗口),_blank(新建窗口),_parent(父窗口),_top(顶层窗口),<iframe>标签的name属性(即表单返回结果展示在<iframe>窗口)。
    查询参数是通过键值对传输的,url?后面 键(name)=值(value)

    1. method 数据传输的方法
    2. 1. get 不安全,传输快,大小有限制
    3. 2. post 比较安全,传输比get慢,传输数据大小没限制
    4. enctype: 数据post传输方法的时候,需要设置数据传输的类型(数据以普通文本或者二进制形式)。
    5. 1. 默认是application/x-www-form-urlencoded(文本的格式)
    6. 2. multipart/form-data 把文件分割多块传输,用二进制的形式传输。文件上传必须设置这种类型

    enctype 属性

<form>表单的enctype属性,指定了采用 POST 方法提交数据时,浏览器给出的数据的 MIME 类型。该属性可以取以下值。

  • application/x-www-form-urlencoded
    application/x-www-form-urlencoded是默认类型,控件名和控件值都要转义(空格转为+号,非数字和非字母转为%HH的形式,换行转为CR LF),控件名和控件值之间用=分隔。控件按照出现顺序排列,控件之间用&分隔。
  • multipart/form-data
    multipart/form-data主要用于文件上传。这个类型上传大文件时,会将文件分成多块传送,每一块的 HTTP 头信息都有Content-Disposition属性,值为form-data,以及一个name属性,值为控件名。
    1. Content-Disposition: form-data; name="mycontrol"
0

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3