HTML语言教程之五：表单(FORM)标记
2006-11-07 21:17:41| 分类：
博客知识
| 标签：
|举报
|字号大中小 订阅
|
HTML语言手册
HTML是Hepertext Markup Language的缩写，翻译成中文是超文本标记语言。它是纯文本文件，因此用记事簿之类的文本编辑器就可以编写。HTML文件一般以htm 或 html位扩展名，这就是我们平时浏览的网页。浏览器能够解释HTML标记，并按设计要求显示出来。
每个HTML标记都要用尖括号括起来。每一标记都必须指明开始和结束，在标记前加斜杠表示该标记的结束。因此，在标记的开始和结束之间的区域就是该标记的作用域。例如：
<p>被显示的文本</p>
下面分类逐一介绍各个标记的意义。
HTML语言教程之五：表单(FORM)标记
表单FORM的基本语法
<form action=活动 method=方法>
各种表单域
...
<input type=submit> <input type=reset>
</form>
方法有GET 和 POST 两种。POST方法一行一行发送表单信息到服务器，而GET方法把表单信息合并成一个字符串发送。要使用表单中各种表单域的信息编写脚本，则用POST方法为好。活动表明的是如何处理表单信息。一般是一个ASP脚本或CGI程序的URL地址。
表单的输入域 input
<input type=类型 名称">
在表单中input域设置给用户的输入形式。type给出输入框的类型，而name用来命名该输入框。name是由用户自由命名的输入域标志，而type有下列类型可选：
text 单行文本框
password 口令输入框。输入的字符带面具显示。
checkbox 复选框
radio 单选框
image 图片框
hidden 隐藏域。不显示给用户
submit 提交按钮。发送表单，这是不可缺少的按钮。
reset 重置按钮。清除表单域中的值。
1 文字输入和密码输入
<input type=*>
<input type=* value=**>
代码：
<form action=?? method=POST>
您的姓名:
<input type=text type=text value=http://><br>
密码:
<input type=password type=submit value="发送"><input type=reset value="重设">
</form>
显示：
您的姓名:
您的主页的网址:
密码:
代码：
<input type=* size=**>
<input type=* maxlength=**><form action=?? method=POST>
<input type=text size=40><br>
<input type=text maxlength=5><br>
<input type=submit><input type=reset>
</form>
显示：
2 复选框(Checkbox)
<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>
代码： <form action=?? method=POST>
<input type=checkbox
<input type=checkbox checked>Apple<p>
<input type=checkbox value=橘子>Orange<p>
<input type=submit><input type=reset>
</form>
显示：
Banana
Apple
Orange
3 单选框(RadioButton)
<input type=radio value=** checked>
代码:
<form action=？ method=POST>
<input type=radio type=radio checked>Apple<p>
<input type=radio value=橘子>Orange<p>
<input type=submit><input type=reset>
</form>
Banana
Apple
Orange
4 图象坐标
<input type=image src=url><form action=？method=POST>
<input type=image src=f.gif><p>
<input type=radio value=2 checked>x2
<input type=radio value=4>x4
<input type=radio value=6>x6<p>
<input type=reset>
</form> 5 列表框Select
<select size=2>名称>
<option value=值> 待选项
<option selected>待选项
<option >待选项
</select>
列表框可用来预定一系列可能的输入项供用户选择，在输入时只要点击鼠标就可输入，以节约用户时间。其中每一个<option>后面跟一个待选项。例如： <form action=？ method=POST>
<select
<option>Banana
<option selected>Apple
<option value=My_Favorite>Orange
</select><p>
<input type=submit><input type=reset>
</form>
显示为：
BananaAppleOrange
size的用法 <select size=**>
代码：
<form action=？ method=POST>
<select size=3>
<option>Banana
<option selected>Apple
<option value=My_Favorite>Orange
<option>Peach
</select><p>
<input type=submit><input type=reset>
</form>
显示：
BananaAppleOrangePeach
多重选择multiple
<select size=** multiple>
注意，是用Ctrl键配合鼠标实现多选。
代码：
<form action=？ method=POST>
<select size=3 multiple>
<option selected>Banana
<option selected>Apple
<option value=My_Favorite>Orange
<option selected>Peach
</select><p>
<input type=submit><input type=reset>
</form>
BananaAppleOrangePeach
6 滚动文本框 textarea
<textarea rows=** cols=**> ... </textarea>
滚动文本框，用来输入多行文本，显示为带垂直滚动条的输入区域。例如： <form action=？ method=POST>
<textarea rows=5 cols=60>
</textarea>
<P>
<input type=submit><input type=reset>
</form>
显示为：
对于很长的行是否进行换行的设置(Word Wrapping)
1 wrap=off 不换行，是缺省设置。
2 wrap=soft 软换行，好象 MS－WORD 里的“软回车”。
3 wrap=hard 硬换行，好象 MS－WORD 里的“硬回车”。
|
|
1、页面标记 2、字体标记 3、文本格式标记 4、图像标记 5、表单标记 6、表格标记 7、表格标记高级
8、框架标记 9、会移动的文字 10、多媒体页面 |
评论这张
转发至微博
转发至微博
关闭
玩LOFTER，免费冲印20张照片，人人有奖！
我要抢>
<#--最新日志，群博日志-->
<#--推荐日志-->
<#--引用记录-->
<#--博主推荐-->
<#--随机阅读-->
<#--首页推荐-->
<#--历史上的今天-->
<#--被推荐日志-->
<#--上一篇，下一篇-->
<#-- 热度 -->
<#-- 网易新闻广告 -->
<#--右边模块结构-->
<#--评论模块结构-->
<#--引用模块结构-->
<#--博主发起的投票-->
评论