HTML表单介绍

作用

HTML 中表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。

工作机制

HTML中，表单内容写在<form></form>标签内，当用户在表单中输入内容并提交后，浏览器会将表单中的数据进行打包，发送给服务器，服务器接收后解析出表单内容并处理。

form标签

form标签的使用方法如下

<form name=""  method="" action="" enctype="">
      表单项，文字，图片等
</form>

• name表示表单的名称
• action用来指定接收表单数据的服务器页面
• methos是指定表单的传输方式，post或get
• enctype指定传递数据的编码方式

表单中的各式内容，则是在form标签内添加其他标签的方式完成，下面介绍一些常用的标签。

表单中常用的标签

• input标签，用于向表单输入内容，常见的格式有：
  type="text" 文本输入框
  type="password" 密码输入框

  示例

<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入密码"> 

• type="radio" 单选按钮
  示例

<input type="radio" name="sex" id="male">
<input type="radio" name="sex" id="female">

• type="checkbox" 复选/多选按钮
  示例

 <input type="checkbox" name="hobby" id="basketball">
 <input type="checkbox" name="hobby" id="travel">
 <input type="checkbox" name="hobby" id="pet">

• type="hidden" 隐藏域
  示例

<input type="hidden" name="csrf" id="xxxxxxxxxxx">

<input type="reset" value="重置">重置按钮

<input type="button" value="按钮">普通按钮

<input type="submit" value="提交">提交按钮

• ttextarea： 长文本输入
  示例

<textarea name="article" id="dialog" cols="30"
 rows="10" placeholder="ddd"></textarea>

• select：下拉选择列表，闭合标签，用<option></option>增加选项。
  示例

<label for="password">密码</label>
<input type="password" id="password" name="password"placeholder="请输入密码">