表单标签<form>的使用

一，什么是表单

• 可以收集用户的信息和反馈意见，是网站管理者与浏览者之间沟通的桥梁。如下图：

经典表单

二，表单标签<form>

• 所有的表单内容都应放在<form>标签内部，如下图：

form标签

• 如上图所见，表单标签<form>有两个属性action和method
  1.action：这个属性规定该表单提交的信息存储的文件以及它的地址，例如：

此时该表单提交的信息就会存储在XXX.php文件里

三，输入标签<input>

• 用处：<input>标签一般用于给用户输入信息，服务器收集用户输入的信息；
• <input>标签的用法
  1.用户名：<input type = "text" name="username">，和密码框一样都是单行输入框，用于给用户输入账号用户名之类；
  效果：
  
  用户名输入
  
  2.密码框：<input type = "password" name="password">，用于给用户输入密码，输入后信息会被伪装成小圆点；
  效果：
  
  密码框输入后信息被伪装成小圆点
  
  3.单选框：<input type = "radio" name="sex" value="男"> ,用于给用户选择只能选择一项的选择,
  PS：
  ①：单选框name属性必须要有，且每个选项的name值必须相同；
  ②：value属性的值也要有，否则提交后服务器显示的是on，就不能获悉提交的内容是什么；
  效果：
  
  单选框

4.复选框：<input type = "checkbox" name="car" value="奥迪">，多项选择
PS：复选框name属性的值可以不一样，但是推荐一样方便用于分类；
效果：

复选框

5.文件上传：<input type="file" name = "上传文件的在服务器的名字" accept="规定文件类型">，用于给用户上传文件
效果：

文件上传

6.隐藏域：<input type="hidden" name = "上传到服务器该数据的key" value="上传到服务器该数据的值">
用户看不见这个区域，常用于暂存数据和安全性校验；

四，下拉菜单标签<select><option>

• 用法：

下拉菜单

• 效果：

~~~~~~~~~~~~~~~

五，文本域<textarea>

• 用法：

  
  
  常用于评论和留言

六，<label>标签

• 用法：给输入框起名，并且点击这个名字就能自动跳转到该输入框，有for属性，链接该<label>标签的<input>标签要填写id属性，并且id属性的值和for属性的值要相等；

• 图示：

  
  
  label标签用法

七，一些常用的<input>标签属性

• placeholder：用于提示用户该输入框内容，如下：

placeholder

• selected：默认选项，未选择情况下默认选择该选项，如下：

selected

• maxlength：规定输入框的最大输入字数，如下：

maxlength

• disabled：该输入框禁止输入，如下：

disabled