完整的表单结构form

古城微笑少年丶 2022-07-12 07:06 150阅读 0赞

表单是经常使用的，如:网站登录、附件上传都是通过表单制作。今天小编就和大家说说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="文本">