form表单有什么作用?有哪些常用的input 标签,分别有什么作用?

标签用于为用户输入创建 HTML 表单,表单能够包含文本字段、复选框、单选框、提交按钮等等,表单用于向服务器传输数据。


type=text

输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件, 家庭住址等等,是Input的默认类型。

type=password

密码输入框,当在此输入框输入信息时显示为保密字符。

type=file

提供了一个文件目录输入的平台。

type=hidden

隐藏域,如果一个非常重要的信息需要被提交到下一页,但又不能或者无法明示的时候。

type=button

按钮,要让按钮跳转到某个页面上还需要加入写JavaScript代码。

type=checkbox

多选框,常见于注册时选择爱好、性格、等信息。

type=radio

单选框,出现在多选一的页面设定中。

type=image

将图片作为提交按钮。

type=submit

提交按钮,将Form中所有内容进行提交action页处理。

type=reset

充值按钮,清空表单所有填写内容。

post 和 get 方式的区别?

get安全性非常低,post安全性较高。

get是从服务器上获取数据,post是向服务器传送数据。

get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP的post机制,将表单内各个字段与其内容放置在HTML的header内一起传送到action属性所指的URL地址。用户看不到这个过程。

get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。

对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。

在input里,name 有什么作用?

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

radio 如何 分组?

在input中设置name属性,name相同的位同一个组。

placeholder 属性有什么作用?

提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

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

在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。隐藏域在页面中对于用户是不可见的,但当用户提交信息的时候,隐藏域的信息也被一起发送到服务器。例如:在提交表单信息时,隐藏域的数据可以验证用户身份,若隐藏域信息与后台数据一致,则通过身份验证。

HTML 表单的用法

表单的定义

表单是一个包含表单元素的区域。表单元素允许用户在表单中输入信息的元素。表单使用表单标签(

)定义。HTML中的表单是HTML页面与浏览器端实现交互的重要手段。利用表单,服务器可以收集客户端浏览器提交的相关信息,比如输入的密码等等。


form标签属性

属性

描述

accept

MIME_type

规定能够通过文件上传进行提交的文件类型,HTML 5 中不支持

accept-charset

charset_list

规定服务器可处理的表单数据字符集

action

URL

规定当提交表单时向何处发送表单数据

autocomplete

on/off

规定表单是否应该启用自动完成功能

enctype

见说明

规定在发送到服务器之前应该如何对表单数据进行编码

method

get/post

规定如何发送表单数据

name

form_name

规定表单的名称。

novalidate

novalidate

规定当提交表单时不对其进行验证

target

_blank/_self/_parent/_top/framename

规定在何处打开

说明

enctype 属性可能的值:

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

multipart/form-data(不对字符编码,在使用包含文件上传控件的表单时,必须使用该值)

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

常用的表单元素

文本域

密码域

单选按钮

男人: Male

女人: Female

复选框

按钮

重置按钮

当点击重置按钮时,重置按钮所在的表单将全部清空,而其他表单不受影响。

提交按钮

当点击提交按钮时,浏览器将自动提交表单。

隐藏域

隐藏域在浏览器中并不显示。

文件上传域

图片按钮

下拉列表

0

1

2

label

label 元素不会向用户呈现任何特殊效果。设置for属性,点击label内的文字也会触发单选按钮。

Male

Female

文本区域

用户可在此文本区域中写文本。在一个文本区中,可输入无限数量的文本。