哪些属性是表单元素的属性(单元的属性有哪些)

http://www.itjxue.com  2023-01-24 15:29  来源:未知  点击次数: 

HTML(5)表单元素以及对各个表单元素的name、value属性的理解

我在学习表单元素的时候感觉很混乱,特别是 name value 这两个属性,没有真正理解它们是干什么的,所以需要梳理一下。

HTML表单元素主要有 form input select textarea button fieldset legend

HTML5新增的表单元素有三个 datalist keygen output

form元素定义HTML表单,收集用户输入。

属性主要有 action 和 method ;

action 定义在提交表单时执行的动作,向服务器提交表单的通常做法是使用提交按钮(type为 submit 的 input 元素); 如果省略该属性,则action会被设置为当前页面 。

method 属性规定在提交表单时所用的HTTP方法(HTTP方法有GET和POST两种,这里只说一下两者的主要区别:GET方法会使表单数据在页面地址栏是可见的,而POST方法不可见,所以POST方法安全性更佳)。

input 元素很常用(为行内元素,在“去哪儿”找实习面试的时候被问到过,当时都答错......),根据不同的 type 属性,可以变化为多种形态。

type 的取值有 text radio checkbox password submit button ;HTML5又新增了 type 类型 email url search number range color date pickers(date month week...) ,这些新类型提供了更好的输入控制和验证。

对于 input 元素,除了 type 属性,常用的就是 name 和 value 属性:

name 属性----想要被正确地提交,每个输入字段必须设置一个 name 属性。

value 属性----为 input 元素设定值,对于不同的 type , value 属性的含义也不同。

效果图如下

当选择“许嵩”,点击“提交”按钮后,看到页面地址栏里表单数据的内容如下图所示。

注意:单选钮的各个 name 属性值要完全一致,否则会不只选中一个选项

效果图如下

定义下拉列表,需要配合 option 使用, option 定义待选择的选项;通常会把首个选项显示为被选选项;可通过selected属性来定义预定义选项。

效果图如下:

当 value 的属性值是空的时候,会取 option 的内容值作为表单数据提交。

定义多行输入字段(文本域)

效果如下图

地址栏数据如下图所示。当文本域为空时,提交的表单数据也为空;改变文本域的值,再次提交,则表单数据也会相应的改变。

button 元素的 type 属性有三个可能的值 button submit 和 reset ;这里只介绍属性值 button

type 为 button 时,定义可点击的按钮

效果如下图

点击后出现

规定输入域的选项列表;需要配合 option 元素一起使用,该元素定义列表项;如需把datalist绑定到输入域,需要把输入域的 list 属性值设置为datalist的 id 值; option 元素必须要设置 value 属性。

效果图如下

当选择第三项,并点击"提交"按钮后,地址栏数据如下

提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器(key-pair generator)。当提交表单时会生成两个键,一个是公钥,一个是私钥。私钥存储于客户端,公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

目前浏览器对该元素糟糕的支持程度 不足 以使其成为有用的安全标准。

效果图如下

点击第一项并提交后,地址栏的数据为

用于不同类型的输出,如计算或脚本输出。

效果如下图

通过总结对这些元素的认识更加深刻了,所以要经常整理!

form的属性有哪些?

表单标志的主要元素、属性如下:

form/form创建表单。

select multiple name=“name”size=“”/select创建滚动菜单,size设置在需要滚动前可以看到的表单项数目。

option 设置每个表单项的内容。

select name=”name“/select创建下拉菜单。

option 设置每个菜单项的内容。

textarea name="name" cols=40 rows=8/textarea创建一个文本框区域,列的数目设置宽度,行的数目设置高度。

input type=“checkbox”name=“name”创建一个复选框,文字在标签后面,input type=”radio“name=“name” value=创建一个单选框,文字在标志后面。

扩展资料:

网页表单:

当看登陆到某个站点的时候我们可能会看到有个登陆框,其中有用户名及密码等内容,这个登陆框基本上就是用form来实现的,form在网页中指的是表单的意思.

表单允许客户端的用户以标准格式向服务器提交数据。表单的创建者为了收集所需数据,使用了各种控件设计表单如 INPUT 或 SELECT。查看表单的用户只需填充数据并单击提交按钮即可向服务器发送数据。服务器上的脚本会处理这些数据。

如果数据要发送出去的话,那么必须定义每个控件元素的 NAME 标签属性。表单中的元素可使用 name 属性或 id 属性,或通过 elements 集合引用。

如果焦点位于表单中的控件时用户按 Esc 键,该控件的值将会恢复到上次的值。如果用户再次按 Esc 键,整个表单都会重置。如果焦点位于表单中但并不在某个控件时用户按了 Esc 键,整个表单都会重置。

参考资料来源:百度百科-FORM

网页中表单基本属性有哪些

一、插入空白表单:

动作:提交方向(提交页面处理和发送邮箱)

第一种:提交到邮箱去:mailto:邮箱地址 不需要服务器权限

第二种:直接提交到动态页面处理(例ASP页面)

方法: GET:发送少量数据,不经过服务器,直接发送,通常附带网址发送参数.

优点:速度快;缺点:发送的数据一般不能超过2K字节,如超过则丢失一部分数据。

post:发送大量数据,要经过服务器,响应慢.

注:提交到邮箱去,要在代码视图里FORM标签后加上此代码:

enctype="text/plain"

二、输入表单元素:

隐藏域:主要用来注明哪个表单被提交或在ASP程序里控制脚本流程。它不被客户端所改动。所以是固定的值。

标签名:相当于字段名,用来编程控制(用来注明接收哪一个内容的值)。

值: 用来发送的数据内容。

同一组的单选框的命名一定要相同,不然会出错。

注:表单标签form 影响实际排版,它会多占一行高度,解决的办法就是把此标签放在不可显示的标签之间,而不影响表单的触发作用。

三、表单标签:

form 空白表单

input type="text" 文本域

input type="checkbox" 复选框

input type="radio" 单选框

input type="submit" 提交按钮

input type="hidden" 隐藏域

textarea 文本区域

select 列表

读书时的笔记,送你了`~~

form元素的常用属性有哪些

表单标志的主要元素、属性如下:

form/form创建表单

select multiple name="name" size=""/select创建滚动菜单,size设置在需要滚动前可以看到的表单项数目

option 设置每个表单项的内容

select name="name"/select创建下拉菜单

option 设置每个菜单项的内容

textarea name="name" cols=40 rows=8/textarea创建一个文本框区域,列的数目设置宽度,行的数目设置高度

input type="checkbox" name="name"创建一个复选框,文字在标签后面

input type="radio" name="name" value=""创建一个单选框,文字在标志后面

input type=text name="foo" size=20 创建一个单行文本输入区域,size设置为字符串的宽度

input type="submit" value="name"创建提交(submit)按钮

input type="image" border=0 name="name" src="name.gif"创建一个使用图像的提交(submit)按钮

input type="reset"创建重置(reset)按钮

JavaScript表单中常用元素主要属性和事件有哪些?

在处理表格的时候,我们关心表单中的信息一般有:

??表单中元素的值。

??表单元素触发的事件。(如改变元素的值,鼠标移出和移入元素都是元素的事件。)

??表单本身的事件,主要是提交表单的操作。

对于常用的表单元素,我们有必要了解它的常用属性和事件,下面来分别介绍下:

文本框:

主要属性:

value:通过value属性我们可以获取和设置文本框中的内容。

主要事件:

onfocus:当进入元素的时候触发。

onblur:当离开元素的时候触发。

onchange:当文本框内容发生改变时触发。

onkeypress:键盘按键被按下并释放一个键时触发。

onkeydown:键盘按键被按下触发。

onkeyup:键盘按键被释放触发。

复选框和单选框:

主要属性:

value:checked:获取选项是否勾选,值为true和false。

主要事件:

onclick:选框被点击时触发。

onchange:checked的值改变时触发。

下拉框:

主要属性:

type:获取下拉框的类型(单选或多选)。

selectedIndex:获取被选中选项的序号。

options[x].selected:获取特定选项是否被选中,x为序号。(selectedIndex一般用于单选的下拉框。option[x].selected一般用于可以多选的下拉框。)

主要事件:

onchange:下拉框中被选中的选项改变时触发。

有一个教程网 站-秒秒学上,看下相关的知识,上面讲解得可以。

(责任编辑:IT教学网)

更多

推荐网络工程师文章