表单

• 表单的功能结构
• 文本栏、密码栏、隐藏栏
• 复选栏、单选栏
• 窗体栏位、区块栏位
• 按钮、图像按钮
• 允许上传文件
• 表单的外框和标题
• 元件的次序和快捷键

表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。

7.1 表单的功能结构：

            主标记结构：<form>…</form>

属性           值                  说明

name        字符串         给这个表单起个名字

method     get（默认）/post（建议使用）     表单的传输方式

action        url                传输目标（默认传给自己）

 

7.2 文本栏、密码栏、隐藏栏

文本栏：<input type="text" name="栏位名称" value="栏位内定值（默认输入的值，非必须有）" size="栏位显示宽度" maxlength="栏位数据输入最大长度" readonly="readonly（只读）">

 

密码栏：<input type="password" name="栏位名称" value="栏位内定值" size="栏位显示宽度" maxlength="栏位数据输入最大长度" readonly="readonly">

 

隐藏性栏位：<input type="hidden" name="栏位名称" value="栏位值">

 

7.3 复选栏、单选栏

多重勾选栏位：<input type="checkbox" name="栏位名称（复选栏的栏位名称一般都填相同的）" value="内定值（必须有）"     checked="checked（默认勾选）" disabled="disabled（不能修改）">

 

单选栏位:<input type="radio" name="栏位名称（单选栏的栏位名称一般都填相同的）" value="内定值（必须有）" checked="checked（默认勾选）" disabled="disabled（不能修改）">

 

7.4 窗体栏位、区块栏位

窗体选项栏位设置:<select name="栏位名称" size="数字" >
     <option value="选项值" selected="selected（默认选值）">…
     <option value="选项值">…
     <option value="选项值">…
     </select>

 

//分组<optgroup label="分组名称"></optgroup>

（<optgroup label="分组名称">

<option value="选项值" selected="selected">…
     <option value="选项值">…
     <option value="选项值">

</optgroup> ）

//多选multiple（<select name="栏位名称" size="数字" multiple>）

 

文字区块的设置:<textarea cols="设置长度" rows="设置宽度">
………（可以让别人输入意见或建议等用途）
</textarea>

 

7.5 按钮、图像按钮

按钮设置: <input type="submit（提交）" value="按钮中显示的文字">
<input type="reset（重写）" value="按钮中显示的文字">

 

按钮图像:<button name="栏位名称" type="图象形态">
<img src="URL">
</button>

 

图像按钮:<input type="image" src="url" alt="文本">

 

7.6 允许上传文件

上传栏位:<input type="file" name="file">

7.7 表单加上外框和标题

外 边 框:<fieldset>...</fieldset>

标　　题:<legend>...</legend>

 

7.8 元件的次序和快捷键

accesskey="w" (Alt+w) (Ctrl+w)

tabindex="n"