HTML中的表单

一、介绍

表单的用途很多。表单的用途主要用来收集客户端提供的相关信息,是网页具有相互交互的功能,是用户与网站实现交互的重要手段。当用户填写完信息后做提交操作,将表单的信息从客户端的浏览器传送到服务器上,经过服务器处理后,再将用户所需要的信息传送回客户端的浏览器上。在网页中,最常见的表单形式有文本框,密码文本框,单选按钮,复选框,按钮(普通,提交,重置),文件域或图像域,文本域和列表(菜单)。

表单标记是<from></form>。

表单是网页上的一个特定的区域,这个区域通过双<from>标记声明,相当于表单容器,在<form>与</form>之间的一切都是表单的内容,包括所有的表单控件,还有其他的伴随数据。

<form action=”” method=”” enctype=””target=””> </form>。

action:表单的处理程序,表单中收集到的数据将要提交到的地址。

name:为了防止表单信息在提交到后台处理程序时出现混乱而设置的名称。

method:定义处理程序从表单中获得信息的方式,有get和post两个值,默认post。

enctype:表单信息的编码方式。

target:目标窗口的打开方式。

二、表单的各种内容形式

1.单行文本框:<input type=”text” name=”” size=””maxlength=”” value=””/>

maxlength定义文本框中输入最多可以输入的文字字数。

value用于设定文本框的默认值。文本输入框中可以输入任何形式的文本字母数字。

2.密码输入框:<input type=”password” name=””maxlength=”” value=””/>

输入到文本框中以*星号显示。

例如:

在浏览器中打开,如图:

3.单选按钮:<input type=”radio” value=”value”name=”name” checked=”checked”/>

value: 设置用户选中该项目后,传送到处理程序中的值。

checked:表示这一选项默认被选中。

4.复选框:<input type=”checkbox” value=””name=”” checked=””/ >

例如:

在浏览器中打开,效果如图:

按钮:

5.普通按钮:<input type=”button” value=””name=”” onclick=””/>

value:按键上显示的名字;

name:按钮名称;

onclick:当鼠标点击时所进行的处理。

6.提交按钮:<input type=”submit” value=””name=”” />

提交按钮不需要设置onclick在单击该按钮时可以实现表单内容的提交。

7.重置按钮:<input type=”reset” value=”” name=””>

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

例如:

在浏览器中打开,效果如图:

8.文件域:<input type=”file” accept=”” name=””>

accept:接收文件的类型,有26种,一般省略;

name:文件的传输名称。

文件域在上传文件时经常被用到,用于查找硬盘中文件,然后通过表单将选中的文件上传。在邮件的附件,上传头像,发送文件经常使用这个控件。

例如:

在浏览器中打开,效果如图:

9.文本域:<textarea name=”” value=”” rows=””cols=””></textarea>

rows:行数

cols:列数

value:默认值

文本域与文本框的区别在于可以添加多行文字,从而可以输入更多的文本。

例如:

在浏览器中打开,效果如图:

10.列表、菜单:

<select name=”” size=”” multiple=””>

<optionvalue=”” selected=””>display option</option>

</select>

size:定义显示的长度;

multiple:表示内容可多选;

value:用于定义选项值时使用;

selected:默认被选中。

往往答案或者选项比较多时,使用列表(菜单)可以节省网页空间。正常情况只能看到一个选项,单击菜单后可以看到所有的选项。

如下是一个实现血型,生肖,星座的下拉列表:

在浏览器中打开,效果如图:

原文发布于微信公众号 - 小末快跑(Faster_Future)

原文发表时间:2018-07-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券