Java Web_03从入门到精通

															**表单的设计**

一、表单标记
基本语法：

Name:设置表单名称 Method：设置表单发送的方法，可以是"post"或者"get" Action：设置表单处理方式 Enctype：设置表单的编码方式 target：设置表单的显示目标 如：

<form method="post" action="mailto:123@163.com">
请输入你的姓名：<br>
<input  name="text"  type="text"  maxlength="8" size="5" value="1">   
<input  name="submit"  type="submit"  value="提交">  
</form>

二、插入文本框
基本语法

<form><input name="text" type="text" maxlength=" " size=" " value=" "></form>

三、插入密码框
基本语法

<form><input name="password" type="password" maxlength=" " size=" " ></form>

如：

<form >
用户登录<br>
用户名：<input  name="text"  type="text"  maxlength="12" size="15"><br>
密码:<input  name="password"  type="password"  maxlength="18" size="15" ><br>  
</form>

四、插入文件域
基本语法

<form><input name=" file" type="file"></form>

如;

<form >
请上传你的照片
<input  name="file"  type="file" > 
</form>

五、插入标准按钮
基本语法

<form><input name="b1" type="button" value="标准按钮"></form>

六、插入提交按钮
基本语法：

<form ><input  name="submit"  type="submit"  value="提交">  
</form>

七、插入重置按钮
基本语法：

如;

<form ><input  name="reset"  type="reset"  value="重置"> 
</form>

八、插入单选框
基本语法：

<form><input name="r1" type="radio"checked value=" ">
</form>

如;

<form >
对讲机设置<br>
<input  name="c1"  type="radio"   checked>自动接听呼叫<br>  
<input  name="c2"  type="radio" >拒绝接听呼叫<br> </form>

九、插入复选框
基本语法：

<form><input name="r1" type="checkbox" checked value=" ">
</form>

如:

<form>
QQ系统设置------综合设置<br>
<input  name="c1"  type="checkbox"  checked>拒绝陌生人消息<br>
<input  name="c2"  type="checkbox"  checked >自动播放魔法表情<br>
<input  name="c3"  type="checkbox"  >禁止所有用户上线提示<br>
</form>

十、插入文字域
基本语法：

<form><textarea name="text" rows=" " cols=" " ></textarea>

Rows: 行数
Cols: 列数
如：

<form>
QQ系统设置-----留言设置<br>
<input type=checkbox checked>离开时自动回复(50字以内)<br>
<textarea  name="text"  rows="10"  cols="30" ></textarea>
</form>

十一、插入下拉列表和列表项
基本语法：

<form>
<select name=" " size=" " multiple>
<option value=" ">选择项
<option value=" ">选择项
</form>

Size：显示的选项数目
Multiple：列表中的项目多选
如：

<form>
请选择你喜欢的特长<br>
<select  name="特长" size=10 multiple>
<option  value="1">唱
<option  value="2">跳
<option  value="3">rap
<option  value="4">篮球
<option  value="5">体操
<option  value="6">足球
<option  value="7">网球
<option  value="8">羽毛球
<option  value="9">棒球
</select>
</form>

**

表格的使用

**
一、插入表格并定义表格结构

、、

基本语法：

语法说明： :定义表结构 :定义行结构

:定义列结构 如：

<table width="470" border="1" align="center">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
</table>

二、设置表格标题

如: ```

插入表格标题

计算机语言

Dreamweaver	Access	C++
FrontPage	SQL SERVER 2000	C#

```  **三、设置表格表头** 基本语法：

<table>
<tr>
<th>….</th>
<td></td>
</tr>

如：

<table width="470" border="1" align="center">
    <tr>
      <th>网页设计</th>
      <th>数据库开发</th>
      <th>程序设计</th>
   </tr>
<tr>
     <td>Dreamweaver</td>
     <td>Access</td>
     <td>C++</td>
   </tr>
<tr>
     <td>FrontPage</td>
     <td>SQL SERVER</td>
     <td>C#</td>
   </tr>
</table>

四、设置表格的宽度和高度
基本语法：

<table width="" height="">
<tr>
<td></td>
</tr>
</table>

如：

<table width="470" height="40" border="1">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
  </table>
  
  <table width="200" height="80" border="1">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   </table>

五、设置表格的边框属性
基本语法：

Border:边框粗细 Bordercolor:边框颜色 如：

	<table width="470" border="1"  bordercolor="#0000FF">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
</table>

六、设置单元格边距与间距

1.间距：<table cellspacing=数值>
2.边距：<table cellpadding=数值>

如：

<table width="380" border="1" cellspacing="0">
  <tr>
    <td >&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  </table>
  
  <table width="380" border="1" cellspacing="5">
  <tr>
    <td >&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
 </table>

如：

<table width="380" border="1" cellpadding="0">
  　<tr>
    <td >脚本语言</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  　</tr>
  </table>
  
  <table width="380" border="1" cellpadding="5">
  <tr>
    <td >脚本语言</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  </table>