表单标签<form>使用场景

一、表单标签<form>

1. 用法：

form标签

2. 作用：提交数据收集数据发送到服务器

3. 属性：action/method

• action: 规定表单提交的信息存储的文件以及它的地址
  

  该表单提交的信息就会存储到xxx.php文件里

• method: 规定表单提交方式，主要是get/post，默认是get。
  注意：get和post不同点
  ①：提交数据方式不同，get在url看到提交的数据，post会在url隐藏提交的数据。相对来说post安全性也比较高一点。
  ②：容量不同：get只能提交少量的数据，容量在1K以；post可以提交大量数据，但是不能超过服务器容量，post完整性也会好一点。
  ③：用法不一样，get主要是关键词提交，所以后台搜索数据建议get，传输数据建议post。

二、 输入标签input

• 作用：让用户输入内容，服务器收集用户输入的信息。

• type属性：text / password / checkbox / radio / hidden / button / submit / reset / email / file / number / search / tel / date / time / range / search / url

• 其他属性：name / placeholder / autofocus / checked / disabled / required / tabindex

三、input标签的用法

• input标签的type属性

1. 输入类型 <type="text">

<form action="" method="">
   <input type="text" name="username">
 </form>

在这里面可以输入内容

2. 密码框 <type="password>"，用户输入密码，输入后信息会被伪装成小数点；

<form action="" method="">
   <input type="password" name="password">
 </form>

密码输入

3. 复选框 <type="checkbox>",
   ①：复选框里面的name可以不一样，但是一样方便分类；
   ②：添加value方便后台区分你要勾选的选项。
   

   复选框

4. 单选框，<type="radio">，用户只能选择一项。
   ①：name属性一定要有，而且每个选项的name必须相同，相同就会有排斥的作用，只能选一个才能实行单选；
   ②：value属性的值也要有，方便后台服务器区分，不添加后台服务器会显示on，不能获悉提交的内容。
   

   单选框

5. 隐藏，<input type="hidden" name="上传到服务器该数据的key" value="上传到服务器的值">

6. 提交按钮，<type="submit">:
   ①：点击时会把当前form表单所有内容提交，其他表单内容不会提交。
   ②：可以修改value值改变按钮的显示文字。

<form action="xxx.php" method="get">
   <input type="submit" >
   <input type="submit" value="ok">
 </form>

提交按钮

7. 清空重置，<type="reset">:点击即可重置表单内的内容。

<form action="xxx.php" method="get">
   <input type="reset">
 </form>

重置按钮

8. 设置邮箱格式，<type="email">:用户输入不是邮箱格式会有提示。
   

   邮箱格式

9. 文件选项，<type="file">
   

   点击选择文件就会跳转文件选项

10. 数字输入框，<type="number">
    

    通过上下选择数字，只有数字

11. 搜索框，<type="search">
    ①：输入时特色是右边有一个x，没有输入就没有；
    ②：点击x就可以清空输入框

搜索框

12. 日期选择框，<type="date">
    

    日期选择框

13. 时间选择框，<type="time">
    

    时间选择框

14. 进度条，<type="range">

<form action="xxx.php" method="get">
   <input type="range"
 </form>

可以左右滑动

15. 网址输入框，<type="url">
    
    输入不是网址就会有提示

• input 标签其他属性的用法

1. 用户名:<name="username">，单行输入框输入用户名账号之类，任何input表单接收用户输入的地方需要有name，没有name提交不了给服务器。

<form action="" method="">
   <input type="text" name="username"><!-- 用户名输入 -->
   <input type="submit"> <!-- 提交按钮 -->
 </form>

输入用户名提交

2.输入框背景提示：<placeholder="用户名">

<form action="/abc.html" method="GET">
   <input type="text" name="username" placeholder="用户名">
   <input type="submit"> 
 </form>

输入框背景提示

3. 获取焦点 <autofocus>

<form action="/abc.html" method="GET">
   <input type="text" name="username" autofocus placeholder="用户名" >
   <input type="submit"> 
 </form>

获取焦点

4.禁止操作 <disabled>

form action="/abc.html" method="GET">
   <input type="text" name="username" disabled placeholder="用户名" >
   <input type="submit"> 
 </form>

输入框已经变成灰色无法输入

5. 提交时提示用户输入信息<required>

点击提交时，提示用户输入信息，不提交空白信息

6. 切换顺序 <tabindex>，序号越大越靠后，0是最后，-1是不切换

<form action="/abc.html" method="GET">
   <input type="text" name="username" placeholder="用户名" tabindex=1>
   <input type="text" name="sex" placeholder="性别"tabindex=3> 
   <input type="text" name="region" placeholder="地区"tabindex=2>
   <input type="submit"> 
 </form>

顺序：用户名-地区-性别

四、 其他标签

1.激活输入框，<label>
用法
①：给输入框起名，并且点击这个名字就会自动跳转到该输入框，②：有for属性，链接该<tabel>标签要填写id属性，并且id属性的值和for属性的值要相等。

label激活输入框l

2. 多行输入文本，<textarea>
①：一定要有name
②：右下角可以拖动调整大小

多行文本

3. 下拉菜单，<select><option>
①: <select>一定要有name
②：<option>加selected，就是默认该选项

下拉菜单

参考：饥人谷课件