美文网首页
HTML表单知识点

HTML表单知识点

作者: 勃王 | 来源:发表于2017-04-10 15:58 被阅读0次

form标签有什么作用


Answer1:将表单内部的各种HTML标记和内容包裹起来,类似于DIV的作用,当页面收到submit命令时,可以将form标签内部包裹的所有数据上传到后台。其内部一般包含内容较多,如文本框(text/password)、文本域(textarea)、单选框(radio)、复选框(checkbox)、下拉列表(select)等.

form标签的属性

  • action 它的值代表浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
  • method 它的值代表将数据传给后台的方式,有get和post两种方式。

get和post方法有什么区别

  1. GET使用URL或Cookie传参。而POST将数据放在BODY中。
  2. GET的URL会有长度上的限制,则POST的数据则可以非常大。
  3. POST比GET安全,因为数据在地址栏上不可见。
    4.对比get请求,post有消息体,一般查询参数。get没有消息体,但又查询参数。

可以发起get请求的标签

<link> <script> <image> <form>
Referer表示文件的来源


常用的input标签

  • button

一个没有默认行为的推送按钮

  • checkbox

一个被选中的盒子,必须使用value属性来确定被提交的数据 用checked属性确认checkbox是否被选中

  • file

可以让用户选择一个文件,accept属性限制了能够选择文件的类型。

  • hidden

一种不被显示但是里面的值会被传到后台

  • image

一个图形化的提交按钮,必须使用src属性来指定图片的地址和alt属性来说明图片未被正确显示时对图片的描述,也可以使用width和height属性来设置图片的大小

  • password

一个单线的文板框,里面的文本是被遮住的,用maxlength属性来定义可以输入文本的最大长度

  • radio

单选按钮,必须使用value属性来确定被提交的数据使用checked让radio默认被选中。在一个单选框组里面,每个单选按钮必须使用一个name值,只有一个单选框能被选中。

  • reset

一个可以重置form表单里所有默认值的按钮.

  • submit

在form表单里,只要有type属性是submit的按钮(input/button),那么在任意一个input内打回车,都表示提交表单。如果使用button标签,那么默认的type就是submit,如果使用其他type那么button标签将不能触发提交。

  • text

一个单线文本框,自动从输入值中删除换行符。


在input里,name 有什么作用?

name 属性规定 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。

注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。


radio 如何 分组?

使用相同name值的radio为同组。


placeholder 属性有什么作用?

placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。
该提示会在用户输入值之前显示在输入字段中。


type=hidden隐藏域有什么作用? 举例说明

  1. 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。
  2. 有些时候一个form里有多个提交按钮,怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢?我们就可以写一个隐藏域,然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
  3. javascript不支持全局变量,但有时我们必须用全局变量,我们就可以把值先存在隐藏域里,它的值就不会丢失了。

例子: 使用hidden实现点击提交按钮数字加1

相关文章

  • form表单(一)

    知识点: 什么是表单 GET和POST HTML表单 在HTML中,表单的作用是收集标签中的内容, ... 中间...

  • HTML表单知识点

    1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 作用 用于搜集不同类型的用户的输入, ...

  • HTML 表单知识点

    1 表单是如何工作的? 用户在网页上填写表单并提交所填信息,浏览器将用户提交的数据发送至 Web 服务器, Web...

  • HTML表单知识点

    form标签有什么作用 Answer1:将表单内部的各种HTML标记和内容包裹起来,类似于DIV的作用,当页面收到...

  • 前端面试每日 3+1 —— 第145天

    今天的知识点 (2019.09.08) —— 第145天 [html] 说说你对表单属性type="hidden"...

  • 前端面试每日 3+1 —— 第448天

    今天的知识点 (2020.07.07) —— 第448天 (我也要出题) [html] 如何通过表单下载文件? [...

  • 前端面试每日 3+1 —— 第449天

    今天的知识点 (2020.07.08) —— 第449天 (我也要出题) [html] 通过设置表单的target...

  • 前端面试每日 3+1 —— 第132天

    今天的知识点 (2019.08.26) —— 第132天 [html] 触发form表单自动提交的方式有哪些? [...

  • HTML表单的简单用法

    HTML表单的简单用法:HTML表单用于搜集不同类型的用户输入。 元素定义HTML表单。HTML表单包含表单元素。...

  • 前端面试每日 3+1 —— 第453天

    今天的知识点 (2020.07.12) —— 第453天 (我也要出题) [html] 表单可以跨域吗? [css...

网友评论

      本文标题:HTML表单知识点

      本文链接:https://www.haomeiwen.com/subject/olrjattx.html