form表单

前端学习日志 专栏收录该内容
21 篇文章 2 订阅

form表单

表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序以处理,从而使得Web服务器与用户之间具有交互功能。
表单实现前后台交互:用户将表单提交到后台再右后台提交到数据库的过程,实现前后端交互。
表单在网页中主要负责数据采集功能,它用< form >标签定义。用户输入的信息都要包含在form标签中,点击提交后,< form >和</ form >里面包含的数据将被提交到服务器或者电子邮件里。
所有的用户输入内容的地方都用表单来写,如登录注册、搜索框。

在这里插入图片描述
在这里插入图片描述

form表单简介

表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
表单标签的格式:
< form action="url" method=get|post name=“myform” >< /form >

  • name:表单提交时的名称
  • action:提交到的地址
  • method:提交方式,默认为get
    post和get区别:
  1. 数据提交方式,get把提交的数据url可以看到,post看不到
  2. get一般用于提交少量数据,post用来提交大量数据
  3. get最多提交2kb数据,post理论上没有限制
  4. get提交的数据在浏览器历史记录中,安全性不好

一个完整的表单包含三个基本组成部分

  • 表单标签
    是指< form >标签本身,它是一个包含表单元素的区域,使用< form >< /form >定义
  • 表单域
    是< form >标签中用来收集用户输入的每一项,通常用input标签来定义,input标签有不同的类型,用以对用用户不同的数据(比如:文本域、下拉列表、单选框、复选框等等)
  • 表单按钮
    用来提交< form >表单中所有信息到服务器
    *表单域和表单按钮都属于表单元素

form表单属性

form支持HTML的全局属性

属性描述
acceptMIME_typeHTML5 不支持。规定服务器接收到的文件的类型(文件是通过文件上传提交的)
accept-charsetcharacter_set规定服务器可处理的表单数据字符集
actionURL规定当提交表单时向何处发送表单数据
autocompleteon / off规定是否启用表单的自动完成功能
enctypeapplication / x-www-form-urlencoded
multipart / form-data
text / plain
规定在向服务器发送表单数据之前如何对其进行编码(适用于 method=“post” 的情况)
methodget / post规定用于发送表单数据的 HTTP 方法
nametext规定表单的名称
target_blank
_self
_parent
_top
规定在何处打开 action URL

accept

已弃用

accept-charset

定义和用法: accept-charset 属性规定服务器用哪种字符集处理表单数据。
语法:

<form accept-charset="value" >

常用值:

  • UTF-8 - Unicode 字符编码
  • ISO-8859-1 - 拉丁字母表的字符编码
  • gb2312 - 简体中文字符集
    服务器可处理的一个或多个字符集。如需规定一个以上的字符集,请使用逗号来分隔各字符集。
    理论上讲,可使用任何字符编码,但没有浏览器可以理解所有的编码。字符编码使用得越广泛,浏览器对其支持越好。

action

定义和用法: 必需的 action 属性规定当提交表单时,向何处发送表单数据。
语法:

<form action="value">

常用值:

  • 绝对 URL - 指向其他站点(比如 src=“www.example.com/example.htm”)
  • 相对 URL - 指向站点内的文件(比如 src=“example.htm”

autocomplete

定义和用法: autocomplete 属性规定表单是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。autocomplete 属性适用于 < form>,以及下面的 < input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。
语法:

<form autocomplete="on|off">

常用值:

  • on 默认。规定启用自动完成功能。
  • off 规定禁用自动完成功能。

enctype

定义和用法: enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。( 只有 method=“post” 时才使用 enctype 属性。 )
语法:

<form enctype="value"> 

常用值:

  • application/x-www-form-urlencoded 默认。在发送前对所有字符进行编码(将空格转换为 “+” 符号,特殊字符转换为 ASCII HEX 值,窗体数据被编码为名称/值对。这是标准的编码格式。 。
  • multipart/form-data 不对字符编码。当使用有文件上传控件的表单时,该值是必需的,窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。
  • text/plain 将空格转换为 “+” 符号,但不编码特殊字符,窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符。

method

定义和用法: method 方法规定如何发送表单数据(form-data)(表单数据会被发送到在 action 属性中规定的页面中)。

表单数据可被作为 URL 变量的形式来发送(method=“get”)或者作为 HTTP post 事务的形式来发送(method=“post”)。

  • 关于 GET 的注释:

    将表单数据以名称/值对的形式附加到 URL 中
    URL 的长度是有限的(大约 3000 字符)
    绝不要使用 GET 来发送敏感数据!(在 URL 中是可见的)
    对于用户希望加入书签的表单提交很有用
    GET 更适用于非安全数据,比如在 Google 中查询字符串

  • 关于 POST 的注释:

    将表单数据附加到 HTTP 请求的 body 内(数据不显示在 URL 中)
    没有长度限制
    通过 POST 提交的表单不能加入书签
    语法:

<form method="get|post"> 

常用值:

  • get 默认。将表单数据(form-data)以名称/值对的形式附加到 URL 中:URL?name=value&name=value。
  • post 以 HTTP post 事务的形式发送表单数据(form-data)。

name

定义和用法: name 属性规定表单的名称。name 属性用于在 JavaScript 中引用元素,或者在表单提交之后引用表单数据。
语法:

<form name="text">

常用值:
text 规定表单的名称。

novalidate

定义和用法: novalidate 属性是一个布尔属性。
novalidate 属性规定当提交表单时不对表单数据(输入)进行验证。
语法: < form novalidate ="novalidate ">
常用值:

  • novalidate 如果使用该属性,则提交表单时不进行验证。

target

定义和用法: target 属性规定一个名称或一个关键词,指示在何处打开 action URL,即在何处显示提交表单后接收到的响应。target 属性定义浏览器上下文(比如选项卡、窗口或内联框架)的名称或关键词。
语法:

<form target="_blank|_self|_parent|_top|framename">

常用值:

  • _blank 在新窗口/选项卡中打开。

  • _self 同一框架中打开。(默认)

  • _parent 父框架中打开。

  • _top 整个窗口中打开。

  • framename 在指定的 iframe 中打开。

HTML 表单输入元素

多数情况下被用到的表单标签是输入标签()。输入类型是由类型属性(type)定义的。
大多数经常被用到的输入类型如下:

文本域(Text Fields)

文本域通过< input type=“text”> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>
    <span>First name:<span>
    <input type="text" name="firstname"><br>
    <span>Last name:<span/>
    <input type="text" name="lastname">
</form>

显示效果如下:
在这里插入图片描述
表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签< input type=“password”> 来定义:

<form>

<span>Password:<span/>
<input type="password" name="pwd">

</form>

显示效果如下:
在这里插入图片描述
注意:密码字段字符不会明文显示,而是以星号或圆点替代。

单选按钮(Radio Buttons)

< input type=“radio”> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male"><span>Male<span/><br>
<input type="radio" name="sex" value="female"><span>Female<span/>
</form>

显示效果如下:
在这里插入图片描述

复选框(Checkboxes)

< input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike"><span>I have a bike<span/><br>
<input type="checkbox" name="vehicle" value="Car"><span>I have a car<span/>
</form>

显示效果如下:

在这里插入图片描述

提交按钮(Submit Button)

< input type=“submit”> 定义了提交按钮.
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
<span>Username:<span/>
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

fieldset标签

< fieldset> 标签可以将表单内的相关元素分组。
< fieldset> 标签会在相关表单元素周围绘制边框。

属性描述
disableddisabled规定该组中的相关表单元素应该被禁用。
rmNewform_id规定 fieldset 所属的一个或多个表单。
nametext规定 fieldset 的名称。

实例如下

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

效果如下
在这里插入图片描述

标签

标签作为计算结果输出显示(比如执行脚本的输出)。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

效果如下
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值