完整的表单结构form

表单是经常使用的，如:网站登录、附件上传都是通过表单制作。今天小编就和大家说说form：1、表单的功能结构；2、文本栏、密码栏、隐藏栏；3、复选栏、单选栏；4、窗体栏位、区块栏位；5、按钮、图像按钮；6、允许上传文件；7、表单的外框和标题。

一、表单的功能结构：

主标记结构：

1. <form>…</form>

复制代码

属性　　　值　　　　说明
name　　字符串　　给这个表单起个名字
method　get/post　　表单的传输方式
action　　url　　　　传输目标

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

文本栏：

1. <input type=”text” name=”栏位名称” value= ”栏位内定值” size=”栏位显示
   
2. 宽度” maxlength=”栏位数据输入最大长度” readonly=”readonly”>

复制代码

密码栏：

1. <input type=”password” name=”栏位名称” value=”栏位内定值” size=”栏位
   
2. 显示宽度” maxlength=”栏位数据输入最大长度” readonly=”readonly”>

复制代码

隐藏性栏位：

1. <input type=”hidden” name=”栏位名称” value= ”栏位值”>

复制代码

三、复选栏、单选栏

多重勾选栏位：

1. <input type=”checkbox” name=” 栏位名称” value=” 内定
   
2. 值” checked=”checked” disabled=”disabled ”>

复制代码

单选栏位：

1. <input type=”radio” name=” 栏位名称” value=” 内定值”
   
2. checked=”checked” disabled=”disabled ”>

复制代码

四、窗体栏位、区块栏位

窗体选项栏位设置：

1. <select name=”栏位名称” size=”数字” >
   
2. <option value=”选项值” selected=”selected”>…
   
3. <option value=”选项值”>…
   
4. <option value=”选项值”>…
   
5. </select>
   
6. //分组<optgroup label="分组名称"></optgroup>
   
7. //多选multiple

复制代码

文字区块的设置：

1. <textarea cols=”设置长度” rows=”设置宽度”>
   
2. ………
   
3. </textarea>

复制代码

五、按钮、图像按钮

按钮设置：

1. <input type=”submit” value=”按钮中显示的文字”>
   
2. <input type=”reset” value=”按钮中显示的文字”>

复制代码

按钮图像：

1. <button name=”栏位名称” type=”图象形态”>
   
2. <img src=”URL”>
   
3. </button>

复制代码

图像按钮：

1. <input type="image" src="url" alt="文本">

复制代码

六、允许上传文件

上传栏位：

1. <input type="file" name="file">

复制代码

七、表单加上外框和标题

外边框：

1. <fieldset>...</fieldset>

复制代码

标题：

1. <legend>...</legend>

复制代码