1 表单标记(Form)

<FORM>称为表单标记,用以宣告此为表单模式,属于一个容器标记,表示其它表单标记需要在它的包围中才有效,

eg:

<form action=“URL" method="POST">

action=“URL” 表单通常是与 CGI 配合使用的,参数 action 便是用以指明该 CGI 程式的位置,这 样此表单所填的资料才能正确传给 CGI 作处理。若馈下没有 CGI 以进行测试,可 设定此参数为 ACTION=”mailto:your@email.com” 那样该表单所填的资料将会寄至 此电邮地址。

method=”POST”传送资料给 CGI 的的方式,可选值为 POST, GET。你只需记住 POST 容许传送大量资料,但 GET 则只接受低于 1K 的资 料,所以你若看过别人的表单原始码的话,你会发现申请表单用的是 POST 而搜 找器用的是 GET。

2 input 参数

<INPUT> 的参数设定(常用):
由于其第一个参数 type 己有很多的选择,而不同的选择表示出不同的输入方式,且其它 参数亦因此而异,故以下将独立介绍不同输入方式及其它参数设定。

type=”Text”
可选值为 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。

2.1 text 单行文字盒

<input type=“Text” name=“age” value=“20” align=“MIDDLE” size=“2” maxlength=“255”>

type="Text"
输入方式为 Text,能产生一单行文字盒,上限为 255 字元。

name="age"
此一单行文字盒名称。

align="MIDDLE"
可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大有处。

value="20"
此一单行文字盒内定值。若不填写则文字盒是空白的,若value="20" 的话,20 便会出现在文字盒中,当然访客可以修改之。

align="MIDDLE"
可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大有处。

size=“2”
此一单行文字盒显示的长度,

maxlength="255"
此一单行文字盒可输入字元的上限,为方便编排资料或避免错输入等,宜设定上 限,例如输入电话或 ICQ UIN 的可设为 8,年龄为 2 等。

<form action=“url" method="POST">
请填入电话号码:<input type="Text" name="phone" value="" size="10" maxlength="8">
</form>

请填入电话号码:

2.2 Radio 单一选择

<input type="Radio" name="gender" value="female“ checked>

type="Radio"
输入方式为 Radio,能产生一单一选择,以供点选。

name="gender"
此一 Radio 名称,参考 Text 部分的说明。

value="female"
内定值。每一个 radio 必须及仅有一个 value,通常有同时采用两个或以上同 name 不同 value 的 Radio 输入方式,可让使用使任选其一。

checked
设该 Radio 为内定被选。同 name 的各个 Radio 中只能有一个使用,或全不使用这参数。
<form action=“URL" method="POST">请选性别:
<input type="Radio" name="gender" value="Female">女性
<input type="Radio" name="gender" value="Male" checked>男性
<br>你喜欢吗:
<input type="Radio" name="like" value="Yes">喜欢
<input type="Radio" name="like" value="No">不喜欢
<input type="Radio" name="like" value="NotSure">不肯定
</form>

女性
男性

你喜欢吗:
喜欢
不喜欢
不肯定

2.3 Checkbox 确认盒

<input type="Checkbox" name="idol" value="Leon" checked>

type="Checkbox"
输入方式为 Checkbox,能产生一确认盒,以供剔选。

name="idol "
此一Checkbox名称,参考 Text 部分的说明。

value=“Leon”
内定值。每一个 Checkbox 必须及仅有一个 value,当被剔选时这值便会传及 CGI,例如所传字串 idol=Leon 。

checked
设该 Checkbox 为内定被选。每个 Checkbox 都是独立的,所以每一个都可使用这 参数,不像 Radio。
<form action=“url" method="POST"> 你喜欢以下那些明星:
<br><input type="Checkbox" name="idol01" value="Leon">黎明
<input type="Checkbox" name="idol02" value="Noriko_Sagai">酒井法子
<input type="Checkbox" name="idol03" value="Leon">郑秀文
<input type="Checkbox" name="idol04" value="BonJovi" checked>BonJovi
</form>

你喜欢以下那些明星:

黎明
酒井法子
郑秀文
BonJovi

2.4 Password 密码输入方盒

<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9">

type="Password"
Password 的其他参数和 Text 是完全相同的,请参考 Text 的介绍。
两者作用不同,Password 所输入的字元全以 * 号表示。

<form action=“URL" method="POST"> 请输入姓名:<input type="Text" name="name"> <br>
请输入密码:<input type="Password" name="pw" maxlength="9">
</form>

请输入姓名:
请输入密码:

2.5 Submit 传输键和 Reset 清除键

<input type="Submit" name="other_funtion" value="确定" align="MIDDLE">
<input type="Reset" value="清除" align="MIDDLE">

type=“Submit”
设定输入方式为 Submit 或 Reset。

name="other_funtion"
Submit 的功能随 name 的不同而不同,须和 CGI 配合。若你只需要普通的传送 键,则是其内定,不必用此参数

value="确定"
这个值不是输给 CGI 的,而是显示在按键上,传送键的内定值为 Submit Query,清除键的内定值为 Reset。
<form action=“URL" method="POST"> <input type="Submit"><input type="Reset">
<br><input type="Submit" value="确定"><input type="Reset" value="清除"> </form>




2.6 Image 图片按键

<input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif">

type="Image"
输入方式为 Image。

name="submit"
所要代表的按键,可以是 submit, reset, 或其它 。
)

src="ex_icon.gif"
按键图片来源,若此图片文件不与该 html 文件在同一目录下,请加上相对或绝对途 径。
<form action=“url" method="POST"> <input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif"> </form>

2.7 File 文件

<input type=“File” name=“upload” align=“BOTTOM” size=“20” maxlength=“100” accept=“text/html”>

input type="File"
输入方式为 Image。通常用以传输文件。

name=“ upload ”
这文件传输的名称,用以识别之用。

align="BOTTOM"
可选值:top, middle, bottom, left, right, texttop, baseline, absmiddle。

size="20"
所显示文字盒的长度。

maxlength="100"
可输入字元的上限。

accept="text/html"
所接受的文件类别,有二十六种选择,但可不设定
<form action=“URL" method="POST"> <input type="File" name="upload" size="30" maxlength="100" accept="text/html"></form>

2.8 Hidden

<input type="Hidden" name="ID" value="6618">

type="Hidden"
输入方式为隐藏或内定。它不会显示任何输入介面,而是一个内定值随表单一起传给 CGI,列如由 CGI 产生的会员号码,或传入可更改的参数以调整 CGI 而避免 修改 CGI 程式码。

name="ID"
这文件传输的名称,用以识别之用。

value=“6618”
内定值,会以如 ID=6618 形式传给 CGI。
<form action=“URL" method="POST"> <input type="Hidden" name="ID" value="6618">
<input type="Submit" value="Submit"> </form>


2.9 Button 按钮

<input type="Button" name="useless" value="Back">

type="Button"
输入方式为一般按键。常配合 Java Script 作为其启动按键。

name="useless"
这文件传输的名称,用处不大。

value="Back"
按键显示名称。
<form> <input type="Button" value="回前一页" onclick="history.go( -1 ); return true;"> </form>

2.10 select option 下拉列表

<SELECT>是卷动选单标记,每一选项皆由 <OPTION> 所标示,把它当作围堵标记或空标 记使用都可以。
<SELECT> 的参数设定(常用):

<select name="where" size="6" multiple>

name="where"
这卷动选单的名称,作识别之用,将会传及 CGI。

size="6"
这卷动选单的列数,即其高度。

multiple
令这卷动选单容许多重选择。


<OPTION> 的参数设定(常用):
例如:
<option value="tw" selected>

value="tw"
这选项的值,将会传及 CGI。请自行修改,但不同选项必须有不同的值。

selected
设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。
下拉列表:
<form action=“URL" method="POST">
 Where you com from?
<select name="where">
<select name="where">
<option value="A">A</option>
<option value="B" selected>B</option>
<option value="C">C</option> <option value="D">D</option>
<option value="E">E</option>
</select>
</form>

Where you com from?

下拉列表,允许多重选择:
<form action=“URL" method="POST">
 Where you com from?
<select name="where" multiple>
<option value="A">A</option>
<option value="B" selected>B</option>
<option value="C">C</option> <option value="D">D</option>
<option value="E">E</option>
</select>
</form>

Where you com from?
按下 ctrl 可以多重选择。

设置了卷动菜单的size。
<form action=“URL" method="POST">
 Where you com from?
<select name="where" size="5">
<option value="A">A</option>
<option value="B" selected>B</option>
<option value="C">C</option> <option value="D">D</option>
<option value="E">E</option>
</select>
</form>

Where you com from?

2.11 textarea 表单文字区块

<TEXTAREA>常用于 bug report, feedback 等需要填写大量资料的用途。

<textarea name="comments" cols="40" rows="4">

name="comments"
这文字区块的名称,作识别之用,将会传及 CGI。

cols="40"
这文字区块的宽度,请自行修改。

rows="4"
这文字区块的列数,即其高度,请自行修改。
<form action=“URL" method="POST"> Give comments:
<textarea name="comments" cols="40" rows="4" wrap="VIRTUAL">
这是预设的字句,通常留空的,随你喜欢。</textarea>
</form>

Give comments:

0
Posted in Java Web

1 最简单的框架代码

FRAMESET 标记有两个属性 ROW、COLS,分别用来说明将把浏览器窗口分成小窗口的数量和各个小窗口的大小。
COLS 属性:纵向将窗口划分为若干窗框。
ROWS 属性:横向将窗口划分为若干窗框。

<frameset cols="50%,*">
<frame name="hello" src="frame_a.html">
<frame name="hi" src="frame_b.html">

</frameset> 此例中 <FRAMESET>把画面分成左右两相等部分,左便是显示 frame_a.html ,右边则会显示 frame_b.html 这档案,<FRAME>标记所标示的框窗永远是按由上而下、由左至右的次序。

2 多窗口页面

<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>

<noframes> 标记后的文字将只出现在不支持 FRAMES 的浏览器中。

3 noframes 标签

如果浏览器不支持 frames,则 noframes 之后的文字会显示。

<html>
<frameset cols="25%,50%,25%">
  <frame src=“frame_a.html">
  <frame src="frame_b.html">
  <frame src="frame_c.html">
<noframes>
<body>您的浏览器无法处理框架!</body>
</noframes>
</frameset>
</html>

4 各个窗口的尺寸设置

<frameset cols=#>

纵向排列多个窗口:

<frameset cols=30%,20%,50%>
<frame src=" frame_a.html ">
<frame src="frame_b.html ">
 <frame src="frame_c.html ">
</frameset>

<frameset rows=#>
横向排列多个窗口:
<frameset rows=25%,25%,50%>
<frame src=" frame_a.html ">
 <frame src=" frame_b.html ">
 <frame src=" frame_c.html ">
 </frameset>

纵横排列多个窗口:
<frameset cols=20%,*>
<frame src="frame_a.html">
<frameset rows=40%,*>
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>

注意:
如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize=”noresize”。

0
Posted in Java Web

1 背景音乐

<bgsound src=#> #=WAV 文件的 URL<bgsound loop=#> #=循环数

<bgsound src="xxx.mp3" loop=3>

2 插入剪辑的视频

<img src="url.gif" dynsrc="url.avi">
0
Posted in Java Web

1 会移动的文字

<marquee> ... </marquee>
<marquee>我会移动耶!</marquee>

我会移动耶!

2 移动的方向

方向 <direction=#> #=left, right

<marquee direction=left>
我从右向左移!</marquee>
<P>
<marquee direction=right>我从左向右移!</marquee>


我从右向左移!


我从左向右移!

方式 <bihavior=#> #=scroll, slide, alternate

<marquee behavior=scroll>我一圈一圈绕着走!</marquee>
<P>
<marquee behavior=slide>我只走一次就歇了!</marquee>
<P>
<marquee behavior=alternate>我来回走耶!</marquee>

我一圈一圈绕着走!


我只走一次就歇了!


我来回走耶!

0
Posted in Java Web

1 表格的基本语法

<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)
eg:
<table border>
<tr>
  <th>Food</th>
  <th>Drink</th>
  <th>Sweet</th>
</tr>
<tr>
  <td>A</td>
  <td>B</td>
  <td>C</td>
</tr>
</table>

2 表格跨行、跨列

跨多列的表元
<th colspan=#>

<table border>
<tr>
  <th colspan=3> Morning Menu</th>
</tr>
<tr>
  <th>Food</th>
  <th>Drink</th>
  <th>Sweet</th>
</tr>
<tr>
  <td>A</td>
  <td>B</td>
  <td>C</td>
</tr>
</table>
跨多行的表元 <th rowspan=#>

<table border>
<tr>
  <th rowspan=3> Morning Menu</th>
  <th>Food</th>
  <td>A</td>
</tr>
<tr>
  <th>Drink</th>
  <td>B</td>
</tr>
<tr>
  <th>Sweet</th>
  <td>C</td>
</tr>
</table>

3 表格边框的设置

边框尺寸设置:
<table border=#>

<table border=10>
<tr>
  <th rowspan=3> Morning Menu</th>
  <th>Food</th>
  <td>A</td>
</tr>
<tr>
  <th>Drink</th>
  <td>B</td>
</tr>
<tr>
  <th>Sweet</th>
  <td>C</td>
</tr>
</table>

4 表格尺寸的设置

表格尺寸设置:
<table border width=# height=#>

<table border width=170 height=100>
<tr>
  <th rowspan=3> Morning Menu</th>
  <th>Food</th>
  <td>A</td>
</tr>
<tr>
  <th>Drink</th>
  <td>B</td>
</tr>
<tr>
  <th>Sweet</th>
  <td>C</td>
</tr>
</table>

5 表元间隙的设置

元间隙设置:
<table border cellspacing=#>
<table border cellpadding=#>

<table border cellspacing=10>
<tr>
  <th rowspan=3> Morning Menu</th>
  <th>Food</th>
  <td>A</td>
</tr>
<tr>
  <th>Drink</th>
  <td>B</td>
</tr>
<tr>
  <th>Sweet</th>
  <td>C</td>
</tr>
</table>

<table border cellpadding=10>
<tr>
  <th rowspan=3> Morning Menu</th>
  <th>Food</th>
  <td>A</td>
</tr>
<tr>
  <th>Drink</th>
  <td>B</td>
</tr>
<tr>
  <th>Sweet</th>
  <td>C</td>
</tr>
</table>

6 表格内文字的对齐/布局

水平布局:
<tr align=#>
<th align=#> #=left, center, right
<td align=#>

<table border width=160>
<tr>
  <th>Food</th>
  <th>Drink</th>
  <th>Sweet</th>
</tr>
<tr>
  <td align=left>A</td>
  <td align=center>B</td>
  <td align=right>C</td>
</tr>
</table>
垂直布局:
<tr valign=#>
<th valign=#> #=top, middle, bottom, baseline
<td valign=#>

<table border height=100>
<tr>
  <th>Food</th>
  <th>Drink</th>
  <th>Sweet</th>
  <th>Other</th>
<tr>
  <td valign=top>A</td>
  <td valign=middle>B</td>
  <td valign=bottom>C</td>
  <td valign=baseline>D</td>
</table>

7 表格在页面中的布局

<table align=#> #=left,middle,right

8 表格的标题

<caption align=#> ... </caption> #=left, center, right
默认是水平居中的。

<caption valign=#> ... </caption> #=top, bottom
默认是垂直居上的。

9 表格的色彩

9.1 表元的背景色彩和背景图像

<th bgcolor=#>
<th background="URL">

表格边框的色彩:
<table bordercolor=#>

表格边框色彩的亮度控制
<table bordercolorlight=#>
<table bordercolordark=#>
0
Posted in Java Web