表单Form实例和讲解

HTML 文件结构(Document Structures)

<html>...</html>
<head>...</head>
<body>...</body>

<HTML>
<HEAD>
     <title>, <base>, <link>, <isindex>, <meta>
</HEAD>
<BODY>
    HTML 文件的正文写在这里... ... 
</BODY>
</HTML>

语言字符集(Charsets)的信息

<meta http-equiv="Content-Type" content="text/html;charset=#">

#=: us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,
iso-2022-jp, x-sjis, x-euc-jp,
euc-kr, iso-2022-kr,
gb2312, gb_2312-80,
x-euc-tw, x-cns11643-1, x-cns11643-2, big5

可在 HTML 文件中设置 MIME 字符集信息。
您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言(language encoding)。
但是如果 HTML 文件里写明了设置，浏览器就会自动设置语言选项。
尤其是主页里用到了字符实体(entities)，则该主页就应该写明字符集信息。
否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。

背景色彩和文字色彩

<body bgcolor=# text=# link=# alink=# vlink=#>

bgcolor --- 背景色彩

text --- 非可链接文字的色彩

link --- 可链接文字的色彩

alink --- 正被点击的可链接文字的色彩

vlink --- 已经点击(访问)过的可链接文字的色彩

#=rrggbb

色彩是用 16 进制的红－绿－蓝(red-green-blue, RGB) 值来表示。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

背景图象 <body background="image-URL">
Non Scrolling Background <body bgproperties=FIXED>

页面空白(Margin)

页面左边的空白 <body leftmargin=#>
页面上方的空白(天头) <body topmargin=#> #=margin amount

链接(Link)

基本语法 <a href="URL"> ... </a>

这是一个 <a href="samp/link.html">链接的例子</a>。点一下带下划线的文字!

这是一个链接的例子。点一下带下划线的文字!

跳转到页面的另外一个地方
<a href="#name"> ... </a>
<a name="name"> ... </a>

<a href="#jump-test">跳转到下一个"链接点"</a><P> <a name="jump-test">下一个链接点</a>

跳转到下一个"链接点"

下一个链接点

跳转到另一个页面的某个地方
<a href="URL#name"> ... </a>
<a name="name"> ... </a>

跳转到另一个页面的<a href="samp/link.html#jump-test">某个地方</a>。

跳转到另一个页面的某个地方。

开一个新的(浏览器)窗口 (Target Window)

<a href="URL" target="Window_Name"> ... </a>

<a href="samp/window.html" target="window_name"> 开一个新窗口! </a>

开一个新窗口!

标尺线

<hr>

<hr>

<hr size=#>

<hr size=10>

<hr width=#>

<hr width=50> <hr width=50%>

<hr align=#> #=left, right

<hr width=50% align=left> <hr width=50% align=right>

<hr noshade>

<hr noshade>

<hr color=#>

========

基本语法

表单的基本语法

`<form action="url" method=*> ... ... <input type=submit> <input type=reset> </form>`

*=GET, POST

表单中提供给用户的输入形式

`<input type=* name=**>`

*=text, password, checkbox, radio, image, hidden, submit, reset

**=Symbolic Name for CGI script

文字输入和密码输入

*=text, password

<input type=>
<input type= value=**>

<form action=/cgi-bin/post-query method=POST>
您的姓名: 
<input type=text name=姓名><br>
您的主页的网址: 
<input type=text name=网址 value=http://><br>
密码: 
<input type=password name=密码><br>
<input type=submit value="发送"><input type=reset value="重设">
</form>

您的姓名:
您的主页的网址:
密码:

<input type=* size=**>
<input type=* maxlength=**>

<form action=/cgi-bin/post-query method=POST>
<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
<input type=submit><input type=reset>
</form>

复选框(Checkbox) 和单选框(RadioButton)

<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>

<form action=/cgi-bin/post-query method=POST>
<input type=checkbox name=水果1>
        Banana<p>
<input type=checkbox name=水果2 checked>
        Apple<p>
<input type=checkbox name=水果3 value=橘子>
        Orange<p>
<input type=submit><input type=reset>
</form>

<input type=radio value=>
<input type=radio value= checked>

<form action=/cgi-bin/post-query method=POST>
<input type=radio name=水果>
        Banana<p>
<input type=radio name=水果 checked>
        Apple<p>
<input type=radio name=水果 value=橘子>
        Orange<p>
<input type=submit><input type=reset>
</form>

图象坐标

在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！

<input type=image src=url>

<form action=/cgi-bin/post-query method=POST>
<input type=image name=face src=f.gif><p>
<input type=radio name=zoom value=2 checked>x2
<input type=radio name=zoom value=4>x4
<input type=radio name=zoom value=6>x6<p>
<input type=reset>
</form>

隐藏表单的元素

<input type=hidden value=*>

<form action=/cgi-bin/post-query method=POST>
<input type=hidden name=add value=hoge@hoge.jp>
Here is a hidden element. <p>
<input type=submit><input type=reset>
</form>

列表框(Selectable Menu)

基本语法

<select name=*>
<option> ...
</select>

<option selected>
<option value=**>

<form action=/cgi-bin/post-query method=POST>
<select name=fruits>
        <option>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
</select><p>
<input type=submit><input type=reset>
</form>

<select size=**>

<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3>
        <option>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
        <option>Peach
</select><p>
<input type=submit><input type=reset>
</form>

<select size=** multiple>

注意，是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样)

<form action=/cgi-bin/post-query method=POST>
<select name=fruits 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>

文本区域

<textarea name=* rows= cols=> ... <textarea>

<form action=/cgi-bin/post-query method=POST>
<textarea name=comment rows=5 cols=60>
</textarea>
<P>
<input type=submit><input type=reset>
</form>

对于很长的行是否进行换行的设置(Word Wrapping)

<textarea wrap=off> ... </textarea>

不换行，是缺省设置。

<textarea wrap=soft> ... </textarea>

“软换行”，好象 MS－WORD 里的“软回车”。

<form action=/cgi-bin/post-query method=POST> <textarea wrap=soft name=comment rows=5 cols=25> </textarea><P> <input type=submit><input type=reset> </form>

<textarea wrap=hard> ... </textarea>

“硬换行”，好象 MS－WORD 里的“硬回车”。

<form action=/cgi-bin/post-query method=POST> <textarea wrap=hard name=comment rows=5 cols=25> </textarea><P> <input type=submit><input type=reset> </form>

posted on 2007-09-13 15:40 Welcome 阅读(1940) 评论(0) 编辑收藏所属分类: HTML\CSS

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理
相关文章: CSS基本布局16例表单Form实例和讲解缓存的知识 html cache HTML/css常识 html滚动代码大全---Marquee

Welcome 布拉格

公告

常用链接

留言簿(3)

随笔分类(1)

文章分类(7)

最新评论

HTML 文件结构(Document Structures)

<html>...</html><head>...</head><body>...</body>

语言字符集(Charsets)的信息

<meta http-equiv="Content-Type" content="text/html;charset=#">

背景色彩和文字色彩

<body bgcolor=# text=# link=# alink=# vlink=#>

#=rrggbb

背景图象 <body background="image-URL">Non Scrolling Background <body bgproperties=FIXED>

页面空白(Margin)

页面左边的空白 <body leftmargin=#>页面上方的空白(天头) <body topmargin=#> #=margin amount

链接(Link)

基本语法 <a href="URL"> ... </a>

跳转到页面的另外一个地方<a href="#name"> ... </a><a name="name"> ... </a>

跳转到另一个页面的某个地方<a href="URL#name"> ... </a><a name="name"> ... </a>

开一个新的(浏览器)窗口 (Target Window)

<a href="URL" target="Window_Name"> ... </a>

标尺线

<hr>

<hr size=#>

<hr width=#>

<hr align=#> #=left, right

<hr noshade>

<hr color=#>

========

基本语法

表单的基本语法

<form action="url" method=*>... ... <input type=submit> <input type=reset></form>

表单中提供给用户的输入形式

<input type=* name=**>

文字输入和密码输入

<input type=*><input type=* value=**>

<input type=* size=**><input type=* maxlength=**>

复选框(Checkbox) 和 单选框(RadioButton)

<input type=checkbox><input type=checkbox checked><input type=checkbox value=**>

<input type=radio value=**><input type=radio value=** checked>

图象坐标

<input type=image src=url>

隐藏表单的元素

<input type=hidden value=*>

列表框(Selectable Menu)

基本语法

<select name=*><option> ...</select>

<option selected><option value=**>

<select size=**>

<select size=** multiple>

文本区域

<textarea name=* rows=** cols=**> ... <textarea>

对于很长的行是否进行换行的设置(Word Wrapping)

<textarea wrap=off> ... </textarea>

<textarea wrap=soft> ... </textarea>

<textarea wrap=hard> ... </textarea>

<html>...</html>
<head>...</head>
<body>...</body>

背景图象 <body background="image-URL">
Non Scrolling Background <body bgproperties=FIXED>

页面左边的空白 <body leftmargin=#>
页面上方的空白(天头) <body topmargin=#> #=margin amount

跳转到页面的另外一个地方
<a href="#name"> ... </a>
<a name="name"> ... </a>

跳转到另一个页面的某个地方
<a href="URL#name"> ... </a>
<a name="name"> ... </a>

`<form action="url" method=*> ... ... <input type=submit> <input type=reset> </form>`

`<input type=* name=**>`

<input type=>
<input type= value=**>

<input type=* size=**>
<input type=* maxlength=**>

复选框(Checkbox) 和单选框(RadioButton)

<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>

<input type=radio value=>
<input type=radio value= checked>

<select name=*>
<option> ...
</select>

<option selected>
<option value=**>

<textarea name=* rows= cols=> ... <textarea>