表单

使用表单标签--form

在HTML中,<form></form>标签对用来创建一个表单,即定义表单的开始和结束位置,在标签对之间的一切都属于表单的内容。每个表单元素开始于form标签,可以包含所有的表单控件,还有必须的伴随数据,如控件的标签、处理数据的脚本或程序的位置等。在表单的<form>标签中,还可以设置表单的基本属性,包含表单的名称、处理程序、传送方法等。一般情况下,表单的处理程序action和传送方法method是必不可少的参数。

处理动作--action

真正处理表单的数据脚本或程序在action属性里,这个值可以是程序或脚本的一个完整URL。

<form action="表单的处理程序">

...

</form>

说明:表单的处理程序定义的是表单要提交的地址,也就是表单中收集到的资料将要传递的程序地址。这一地址可以是绝对地址,也可以是相对地址,还可以是一些其他的地址形式。

表单名称--name

用于给表单命名。这一属性不是表单的必须属性,但是为了防止表单信息在提交到后台处理程序时出现混乱,一般要设置一个与表单功能符合的名称。不同的表单尽量不用相同的名称,以避免混乱。

<form name="表单名称">

...

</form>

说明:表单名称中不能包含特殊符号和空格。

传送方法--method

用来定义method属性用来定义处理程序从表单中获得信息的方式,它决定了表单中以收集的数据是用什么方法发送到服务器的。

<form method="传送方式">

...

</form>

说明:传送方式的值只有两种选择,即get或post。其中,使用get时,表单数据会被视为CGI或ASP的参数发送,也就是来访者输入的数据会附加在URL之后,由用户端直接发送至服务器,所以速度比post快,但缺点是数据长度不能太长;使用post时,表单数据是与URL分开发送的,客户端的计算机会通知服务器来读取数据,所以通常没有数据长度上得限制,缺点是速度比get慢。默认值为get。

编码方式--enctype

表单中的enctype属性用于设置表单信息提交的编码方式。

<form enctype="编码方式">

...

</form>

编码方式的取值
enctype的取值含义
text / plain以纯文本的形式传送
application/x-www-form-urlencoded默认的编码方式
multipart/form-dataMIME编码,上传文件的表单必须选择该项

目标显示方式--target

target属性用来指定目标窗口的打开方式。表单的目标窗口往往是用来显示表单的返回信息,如是否成功提交了表单反的内容

<form target="目标窗口的打开方式">

...

</form>

窗口的打开方式包含4个值:

_blank:将返回的信息显示在新打开的窗口中;

_parent:是指将返回信息显示在父级的浏览器窗口中;

_self:则表示将返回信息显示在当前浏览器窗口;

_top:表示将返回信息显示在顶级浏览器窗口中。

添加控件

按照控件的填写方式可以分为输入类和菜单列表类。输入类的控件一般以input标签开始,说明这一控件需要用户的输入;而菜单列表类则以select标签开始,表示用户需要选择。

在HTML表单中,input标签是最常用的控件标签,包括最常见的文本域、按钮都是采用这个标签,这个标签的基本语法是:

<form>

<input name="控件名称" type="控件类型" />

</form>

还有一些控件不是用input标记的,他们有自己特定标记。

输入类的控件

文字字段--text

text属性值用来设定在表单的文本域中输入任何类型的文本、数字或字母。输入的内容以单行显示。

<input type="text" name="控件名称" size="控件的长度" maxlength="最长字符数" value="文字字段的默认取值">

text文字字段的参数表
参数含义
name文字字段的名称,用于和页面中其他控件加以区别,命名时不能包含特殊字符,也不能以HTML预留作为名称
size定义文本框在页面中显示的长度,以字符作为单位
maxlength定义在文本框中最多可以输入的字符数
value定义文本框中的默认值

密码域--password

在表单中还有一种文本域的形式---密码域,输入到该文本域中的文字均以*或圆点表示。

<input type="password" value="单选按钮的取值"name="控件名称" size="控件的长度" maxlength="最长字符数" >

说明:其中name、size、maxlength参数是必选。

password密码域的参数表
参数含义
name域的名称,用于和页面中其他控件加以区别,命名时不能包含特殊字符,也不能以HTML预留作为名称
size定义文本框在页面中显示的长度,以字符作为单位
maxlength定义在文本框中最多可以输入的字符数
value定义密码域的默认值,同样以*显示

单选按钮--radio

单选按钮能够进行项目的单项选择,以一个圆框表示。

<input type="radio" value="单选按钮的取值" name="单选按钮的名称" checked=“checked”/>

说明:checked属性表示这一单选按钮默认被选中,而在一个单选按钮组中只能有一项单选按钮空间设置为checked。value用来设置用户选中该项目后,传送到程序中的值。

复选框--checkbox

在网页设计中,有一些内容需要让浏览者以选择的形式填写,而选择的内容可以是一个,也可以是多个,这时就需要使用复选框控件checkbox。复选框在页面中以一个方框来表示。

<input type="checkbox" value="复选框的取值" name="名称" checked=“checked”/>

说明:在该语法中,checked参数表示该选项在默认情况下已经被选中,一个选择中可以有多个复选框被选中。

普通按钮--button

在网页中按钮也很常见,在提交、恢复选项时常常需要用到按钮。普通按钮一般情况下需要配合脚本来进行表单处理。

<input type="button" value="按钮的取值" name="按钮名" οnclick=“处理程序”/>

提交按钮--submit

提交按钮是一种特殊的按钮,不需要设置onclick参数,在单击该类按钮时可以实现表单内容的提交。

<input type="submit" value="按钮的取值" name="按钮名"/>

重置按钮--reset

单击重置按钮后,可以清除表单的内容,恢复默认的表单内容设定。

<input type="reset" value="按钮的取值" name="按钮名"/>

图像域--image

如果网页使用了较为丰富的色彩,或复杂一些的设计,在使用表单默认的按钮形式就会破坏整体的美感,会让人觉得单调。这时可以使用图像域创建与网页整体效果相统一的图像提交按钮。图像域是指可以用在提交按钮位置上的图片,这幅图画具有按钮的功能。

<input type="image" src=“图像地址” name="图像域名称"/>

隐藏域--hidden

表单中的隐藏域主要用来传递一些参数,而这些参数不需要在页面中显示。当用户提交表单时,隐藏域的内容会一起提交给处理程序。

<input type="hidden" value="提交的值" name="隐藏域名称"/>

文件域--file

文件域在上传文件时常常用到,他用于查找硬盘中的文件路径,然后通过表单将选中的文件上传。在发送电子邮件、上传头像、传送文件时常常会看到这一控件。

<input type="file" name="文件域名称"/>

列表/菜单标记

菜单列表类的控件主要用来选择给定答案中的一种,这类选择往往答案比较多,使用单选按钮比较浪费空间。可以说,菜单列表类的控件主要是为了节省页面空间而设计的。列表和菜单都是通过<select>和<option>标记来实现的。

<select name="下拉菜单的名称">

<option value="" select="selected">选项显示内容</option>

<option value="选项值">选项显示内容</option>

.......

</select>

列表和菜单标记属性
菜单和列表标记属性描述
name菜单和列表的名称
size显示的选项数目
multiple列表中的项目多选
value选项值
selected默认选项

文本域标记--textarea

一种特殊定义的文本样式,称为文字域或文本域。与文字字段,他可以添加多行文字,从而可以输入更多的文本。这类控件在一些留言本中最为常见。

<textarea name="文本域名称" value="文本域默认值" rows="行数" cols="列数">

</textarea>

文本标记属性的含义
属性含义
name文本域的名称
rows文本域的行数
cols文本域的列数
value文本域的默认值

id标记

在HTML的表单元素中,还有一个id标记。这一标记是一个较为特殊的标记,它主要用于标记一个唯一的元素。在实际应用中,表单是使用id标记最多的一类元素。

<id="元素的标识名">

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值