当前位置: 洪哥笔记 > DHTML > HTML表单<FORM>标签

 

HTML表单<FORM>标签


关键词

HTML表单 FORM标签

摘要

HTML中使用<FORM>标签来表单表单,在<FORM>标签下还有一系列的表单控件。

HTML表单<FORM>标签

在HTML中,经常需要与用户之间进行交互。比如让用户输入用户名密码、比如上传一个文件、比如选择一个下拉列表、比如点击一个按钮去进行修改什么。那么 这个时候,就需要用到<FORM>标签。<FORM>标签是表单的框架标签,下面包括很多子标签, 如<INPUT>、<SELECT>、<TEXTAREA>等。

一、定义


<FORM>标签就是英文单词Form,“表单”的意思。就像<TABLE>需要<TR>和<TD>一 样,<FORM>标签独立存在也是没有什么意义的,它必须与表单控件标签一起使用才有意义。所谓表单的控件,包括文本框、密码框、文本区域、 单选框、复选框、下拉列表框、文件上传按钮、普通按钮、重置按钮、提交按钮等。后面我们会逐一讲到。

二、语法


一个表单,以<FROM>开始,以</FORM>结束。中间嵌套各种子标签。

<FORM>举例:
<form method="post" action="xxx.php">
请输入用户名:<input type="text" name="username" size="20" />
<br />
请输入密码:<input type="password" name="password" size="20" />
<br />
<input type="submit" value="登录" />
</form>

说明:这个用来登录的表单代码。代码从<form>开始,到</form>结束。中间包括了三个<input>控 件,一个是文本框,用于输入用户名。一个是密码框,用于输入密码。还一个是提交按钮,用于将表单中的用户输入的数据提交到网站服务器端。当然因为我们这里 还没有学习服务器端的动态脚本言(如ASP、PHP、JSP、ASP.NET等),所以暂时是看不到提交过后的效果的。

三、属性


<FORM>标签主要有name、method、action三个重要的属性。下面一一讲解。

name属性:
用于标记此<FORM>标签的名称,在JavaScript中,可以很方便的通过<FORM>标签的name属性来找到这个表单,并进一步找到下面的控件对象。从而就可以做出“用户名不能为空”这样的判断。

method属性:
用于表示表单数据提交到服务器时使用的方法,这时的可选值为GET或POST。关于GET和POST的区别洪哥就不在这里讨论了,后面讲到动态脚本语言时再讲。

action属性:
用于表示表彰数据一旦被提交,将会提交到处理页面。上面例子中,洪哥给出的是本目录下的xxx.php页面。在xxx.php页面中,它可以接收我们表单中传过去的用户名、密码等参数,可以进一步的判断用户输入的信息是否正确。

四、注意


1、<FORM>标签一般用于与服务器交互,如果当前不具备服务器环境,那只能看到表单项在浏览器中显示样子,无法看到点提交按钮后的真实效果。
2、<FORM>标签可以与<TABLE>一起相互嵌套使用,让整个表单看起来更整齐、美观。

 

要饭二维码

洪哥写文章很苦逼,如果本文对您略有帮助,可以扫描下方二维码支持洪哥!金额随意,先行谢过!大家的支持是我前进的动力!

文章的版权

本文属于“洪哥笔记”原创文章,转载请注明来源地址:HTML表单<FORM>标签:http://www.splaybow.com/post/html-form.html

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:8771947!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D

« HTML表格的表头<TH>标签 HTML表单文本框<INPUT>标签 »