HTML学习笔记之HTML表单

Love The Way You Lie 2022-04-25 04:22 212阅读 0赞

**HTML表单功能：** HTML表单用于搜集不同类型的用户输入，表单由不同类型的标签组成。

**<form>标签及属性用法如下：** :定义整体的表单区域

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>action</td> 
   <td>定义表单数据提交地址</td> 
  </tr> 
  <tr> 
   <td>method属性</td> 
   <td>定义表单提交的方式，一般有"get"方式和"post"方式</td> 
  </tr> 
 </tbody> 
</table>

**<form>标签中内部子标签及属性用法如下：**

1.  < label > 标签 为表单元素定义文字标注
2.  < input > 标签 定义通用的表单元素

(1) <input>标签中type属性如下:

<table> 
 <thead> 
  <tr> 
   <th>type属性</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>单行文本输入框</td> 
  </tr> 
  <tr> 
   <td>password</td> 
   <td>密码输入框</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>单选框</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>复选框</td> 
  </tr> 
  <tr> 
   <td>file</td> 
   <td>上传文件</td> 
  </tr> 
  <tr> 
   <td>submit</td> 
   <td>提交按钮</td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td>重置按钮</td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td>普通按钮</td> 
  </tr> 
  <tr> 
   <td>image</td> 
   <td>图片作为提交按钮，用scr属性定义图片地址</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>一个隐藏的表单域，用来存储值</td> 
  </tr> 
 </tbody> 
</table>

(2) <input>标签中value属性 定义表单元素的值  
   (3) <input>标签中name属性 定义表单元素的名称，此名称是提交数据时的键名

3、<textarea>标签 定义多行文本输入框

4、<select>标签 定义下拉表单元素

5、<option>标签 与标签配合，定义下拉表单元素中的选项