专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » Html表单标记 »正文

Html表单标记

来源: 发布时间:星期二, 2008年11月18日 浏览:155次 评论:0
一、什么是表单
表单的作用是提供一个友好的界面,从用户方面收集信息,当用户填好表单上的信息并将表单交付处理后,服务器就可以得到表单中包含的信息,然后由服务器上的相应的程序进行处理。表单是互联网上最流行的交互特性之一,也是动态HTML技术的基础。
表单标记包括:
表单标签:<form></form>表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上。
二、<form>表单标记
功能:用于声明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器。
属性:
<form>…</form>产生一个表单,用来放置各种控件
<form action=“url”>指定要用来得处理表单内容的程序的位置与文件名
<form method=“get/post”>指定浏览器传送数据给后端程序的方式
<form enctype=cdata >指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"
application/x-www-form-urlencoded 窗体数据被编码为名称/值对。这是标准的编码格式。
multipart/form-data 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。上传文件时需要改为此值。
text/plain 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符。
例:
<form action=“URL” method=“GET|POST”>
<input type=submit> <input type=reset>
</form>
小知识:HTML表单form中get、post方法的差异
在B/S应用程序中,前台与后台的数据交互,都是通过HTML中Form表单完成的。Form提供了两种数据传输的方式——get和post。虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响。虽然为了方便的得到变量值,Web容器已经屏蔽了二者的一些差异,但是了解二者的差异在以后的编程也会很有帮助的。
Form中的get和post方法,在数据传输过程中分别对应了HTTP协议中的GET和POST方法。二者主要区别如下:
1、Get将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;Post是将表单中的数据放在form的数据体中,按照变量和值相对应的方式,传递到action所指向URL。
2、Get是不安全的,因为在传输过程,数据被放在请求的URL中,而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中,然后放在某个地方,这样就可能会有一些隐私的信息被第三方看到。另外,用户也可以在浏览器上直接看到提交的数据,一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。
3、Get传输的数据量小,这主要是因为受URL长度限制;而Post可以传输大量的数据,所以在上传文件只能使用Post。
4、Get限制Form表单的数据集的值必须为ASCII字符;而Post支持整个ISO10646字符集。
5、Get是Form的默认方法。
例:课外示例1:get&post.asp
三、<input>输入标记
(一)输入方式text(单行文本框)
功能:
文本框是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简短的回答,如姓名、地址等。
语法:
<input type=“Text” name=“×××” value=“×××” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle” size=n maxlength=n>
属性:
type="text"定义单行文本输入框;
  name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
  size属性定义文本框的宽度,单位是单个字符宽度;
  maxlength属性定义最多输入的字符数。
  value属性定义文本框的初始值

align属性不起任何作用
例:
呈现结果
姓名:
原始码
<FORM>
姓名:<INPUT TYPE="TEXT" NAME="NAME" value="Tom" SIZE="20" align="middle" maxlength=255>
</FORM>
(二)输入方式Radio(单选按钮)
功能:
当需要访问者在待选项中选择唯一的答案时,就需要用到单选框了。
语法:
<input type=Radio name=“×××” value=“×××” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle” checked>
属性:
type="radio"定义单选框;
  name属性定义单选框的名称,要保证数据的准确采集,单选框都是以组为单位使用的,在同一组中的单选项都必须用同一个名称;
  value属性定义单选框的值,在同一组中,它们的域值必须是不同的。
例:
呈现结果
性别:男 女
原始码
<FORM>
性别:
男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="男" align=middle checked>
女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="女" align=middle>
</FORM>
(三)输入方式checkbox(多选按钮或复选框)
功能:
复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个唯一的名称。
语法:
<input type=Checkbox name=“×××” value=“×××” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle” checked>
属性:
type="checkbox"定义复选框;
  name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
  value属性定义复选框的值
例:
呈现结果
喜好: 电影 看书
原始码
<FORM>喜好:
<INPUT TYPE="CHECKBOX" NAME="like" VALUE=1 align=middle checked>电影
<INPUT TYPE="CHECKBOX" NAME="like" VALUE=2 align=middle>看书
</FORM>
(四)输入方式Password(密码输入框)
功能:
是一种特殊的文本域,用于输入密码。当访问者输入文字时,文字会被星号或其它符号代替,而输入的文字会被隐藏。
语法:
<input type=Password name=“×××” value=“×××” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle” size=n maxlength=n>
属性:
type="password"定义密码框;
  name属性定义密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
  size属性定义密码框的宽度,单位是单个字符宽度;
  maxlength属性定义最多输入的字符数。
例:
呈现结果
请输入密码: 窗体底端
原始码
<FORM>请输入密码:<INPUT TYPE="PASSWORD" NAME="pw" value=999 size=20 maxlength=9>
</FORM>
(五)输入方式Submit(确认键)及Reset(清除键)
功能:
提交按钮用来将输入的信息提交到服务器。
复位按钮用来重置表单。
语法:
<input type=Submit name=“×××” value=“×××” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle”>
<input type=Reset value=“×××” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle”>
属性:
type="submit"定义提交按钮;type="reset"定义复位按钮;
  name属性定义按钮的名称;
  value属性定义按钮的显示文字;
例:
<form>
<input type=text size=20><br>
<input type ="submit" value="送出资料" size=10>
<input type ="reset" value="重新填写" size=10>
</form>
(六)输入方式Image(图片按键)
语法:
<input type=Image name=“submit|reset|…” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle” src=“URL”>
属性:
src属性为按键图片来源,请加上绝对或相对路径
例:
<center>
<form>
这是一个图像按钮<br>
<input type=Image name=submit align=bottom src=arrow.ico>
</form>
</center>
(七)输入方式file
功能:
有时候,需要用户上传自己的文件,文件上传框看上去和其它文本域差不多,只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
  注意:在使用文件域以前,请先确定你的服务器是否允许匿名上传文件。表单标签<form>中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码;另外,表单的传送方式必须设置成POST。
语法:
<input type=File name=“upload” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle” size=n maxlength=n accept=“text/html”>
属性:
type="file"定义文件上传框;
  name属性定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
  size属性定义文件上传框的宽度,单位是单个字符宽度;
  maxlength属性定义最多输入的字符数。
例:
<center>
<form>
添加附件:<br>
<input type="file" name="upload" align="bottom" size="20" maxlength="100" accept="text/html">
</form>
</center>
(八)输入方式Hidden(隐藏文本域)
功能:
隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
语法:
<input type=Hidden name=“×××” value=“×××”>
属性:
type="hidden"定义隐藏域;
  name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
  value属性定义隐藏域的值
例:
<form>
学习隐藏域<br>
[ft=,3,]<input typ

相关文章

读者评论

  • 共0条 分0页

发表评论

  • 昵称:
  • 内容: