HTML表单
HTML表单是用于收集用户输入的信息，并将用户输入的内容信息传到后台服务器中。
HTML表单的action属性
表单中action属性，里面填写的是后台服务器的地址。
比如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <!-- 由于我没有后台服务器的地址，所以我使用百度地址来代替 --> 10 <form action="http://www.baidu.com"> 11 12 </form> 13 </body> 14 </html>
HTML表单-----输入元素
表单中常用的标签为<input>标签，<input>标签为单标签。
根据不同的输入类型，由type属性来决定
①type="text"
这个类型表示输入框为文本输入框，用户可以在文本输入框中输入数字，字母，中文等任何东西。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form> 12 这是一个文本框：<input type="text"> 13 </form> 14 </body> 15 16 </html>
效果展示：（里面是可以填写任何信息）
注意一点文本框选择提交后，它不会对文本框的内容上传给后台服务器。
解决方法是添加一个name属性，语法：name="变量名"
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <!-- 这是一个普通的文本输入框 --> 13 请输入姓名：<input type="text" name="uname"> 14 <!-- 这个一个提交按钮，可以将内容提交到后台服务器 --> 15 <input type="reset"> 16 </form> 17 </body> 18 19 </html>
效果展示：
可以看见上传后台服务器使用的是路径url方式，而提交后就可以将输入框中“张三”传到后台服务器上。
注意：
name属性的作用是如果想实现搜集信息的效果每个输入框，都要有自己的名字，所以在很多输入框中，如果想将输入框中的数据传到后台服务器上每个输入框都要有一个name属性
如果当你想要输入框中添加一个
②type="password"
这个类型表示输入框为密码框，里面可以填写数字，字母，中文等所有东西，但是输入的内容都会被隐藏起来。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form> 12 这是一个密码框：<input type="password"> 13 </form> 14 </body> 15 16 </html>
展示效果：（里面输入内容会被隐藏）
③type="radio"
这个类型代表输入框为一个单选按钮，比如性别男和女分类这时使用单选按钮。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form> 12 男<input type="radio">女<input type="radio"> 13 </form> 14 </body> 15 16 </html>
效果展示：
但是如果这样子做的话，可以同时选中这两个单选按钮，这样是不是不太合理呢。
所以为了解决这个问题，我们需要将两个单选按钮进行绑定，这样就可以实现两个只能选其一个。
方法：
使用name属性。语法：name="变量名"（但是这两个单选按钮的那么的参数必须相同）
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form> 12 <!--添加name属性即可，当两个单选按钮的name属性值必须相同，才能完成绑定--> 13 男<input type="radio" name="sex">女<input type="radio" name="sex"> 14 </form> 15 </body> 16 17 </html>
效果展示：
如果我想网页刷新也默认选中男时要怎么解决呢？
方法：
在男的单选按钮上添加属性checked
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form> 12 <!--在男的单选按钮中添加checked属性--> 13 男<input type="radio" name="sex" checked>女<input type="radio" name="sex"> 14 </form> 15 </body> 16 17 </html>
效果展示：
④type="checkbox"
这个类型表示输入框为多选框。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form> 12 <!-- 使用type="checkbox"实现多选框 --> 13 唱<input type="checkbox">跳<input type="checkbox">rap<input type="checkbox"> 14 </form> 15 </body> 16 17 </html>
效果展示：
当用户想要刷新网页后可以默认选择rap的做法：
方法：只需要将rap后的input标签添加checked属性即可实现
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form> 12 <!-- 使用type="checkbox"实现多选框，后面添加一个checked属性 --> 13 唱<input type="checkbox">跳<input type="checkbox">rap<input type="checkbox" checked> 14 </form> 15 </body> 16 17 </html>
效果展示：
⑤type="submit"
这个类型表示输入框为提交按钮，作用是将表单中的内容提交到后台服务器中。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <!-- 使用type="submit"实现提交按钮--> 13 <input type="submit"> 14 </form> 15 </body> 16 17 </html>
效果展示：
点击后实现提交的功能（这里实现跳转到百度）
在表单中还可以使用<button>标签同样能实现提交的功能。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <!-- 使用<button>标签在表单中同样能实现提交 --> 13 <button>提交</button> 14 </form> 15 </body> 16 17 </html>
效果展示：
点击后同样能实现跳转到百度
⑥type="reset"
这个类型表示输入框为重置按钮，作用是可以让输入框中的非默认值进行清空。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <!-- 这是一个普通的文本输入框 --> 13 请输入姓名：<input type="text"> 14 <!-- 这个一个重置按钮，可以将非默认值进行清空 --> 15 <input type="reset"> 16 </form> 17 </body> 18 19 </html>
效果展示：
这是点击重置按钮前，对文本框输入的内容：
当点击重置按钮后：（可以看见将文本框的内容全部清空了）
HTML表格-----下拉框
表格中实现下来框需要使用<select>标签和<option>标签同时使用。
<select>标签是一个双标签，主要是用来包着<option>标签用来表示这是一个下拉框。
<option>标签是一个双标签，主要是展示下拉框的具体内容。
它们这些标签必须在form表单中才能实现下拉框的作用。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <select> 13 <option>张三</option> 14 <option>李四</option> 15 <option>王五</option> 16 <option>老牛</option> 17 <option>七夜</option> 18 </select> 19 </form> 20 </body> 21 22 </html>
效果展示：
但是现在有个问题，如何将默认值进行修改呢？怎么让他不是第一个作为默认值呢？
这里就需要用到selected属性
在想要默认的值添加一个selected属性即可，但是注意只能有一个！
举个例子：（我现在想让王五为默认值）
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <select> 13 <option>张三</option> 14 <option>李四</option> 15 <option selected>王五</option> 16 <option>老牛</option> 17 <option>七夜</option> 18 </select> 19 </form> 20 </body> 21 22 </html>
效果展示：
HTML表单-----边框
整个表单如果不加边框，就感觉差点意思，而添加边框也可以让表单整体更加完整，而边框添加的标签是<fieldset>
<fieldset>标签是一个双标签，它可以将表单中的内容添加边框，只需要将想要被加边框的内容外套上<fieldset>标签即可
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <!-- 我想将表单中所有内容外添加边框，直接在外面加一个<fieldset>标签 --> 13 <fieldset> 14 输入账号：<input type="text"><br> 15 输入密码：<input type="password"><br> 16 联系人：<select> 17 <option>张三</option> 18 <option>李四</option> 19 <option selected>王五</option> 20 <option>老牛</option> 21 <option>七夜</option> 22 </select> 23 </fieldset> 24 </form> 25 </body> 26 27 </html>
效果展示：
如果我想在表单的边框上添加标题，只需使用<legend>标签实现即可
<legend>标签是一个双标签，作用是给表单添加一个标题
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <!-- 我想将表单中所有内容外添加边框，直接在外面加一个<fieldset>标签 --> 13 <fieldset> 14 <!-- 实现表单的标题 --> 15 <legend>这是一个表单标题</legend> 16 输入账号：<input type="text"><br> 17 输入密码：<input type="password"><br> 18 联系人：<select> 19 <option>张三</option> 20 <option>李四</option> 21 <option selected>王五</option> 22 <option>老牛</option> 23 <option>七夜</option> 24 </select> 25 </fieldset> 26 </form> 27 </body> 28 29 </html>
效果展示：
HTML表单-----通用属性
通用属性可以在表单中的所有标签上都可以使用。
①readonly只读
效果是添加这个属性，输入框就无法输入内容。
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 这是我的名字：<input type="text" readonly value="张三"> 13 </form> 14 </body> 15 16 </html>
效果展示：
只能查看内容，但无法进行添加、删除、修改等操作
②disabled无法操作
这个属性与只读类似，但是它是直接输入框都点击不了。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <!-- 使用disabled无法操作属性 --> 13 这是我的名字：<input type="text" disabled value="张三"> 14 </form> 15 </body> 16 17 </html>
效果展示：
可以看见输入框明显的淡下来，连点击的操作都没有。
③hidden隐藏
这个属性能使表单中标签隐藏起来，无法看见。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <!-- 使用hidden隐藏属性 --> 13 这是我的名字：<input type="text" hidden value="张三"> 14 </form> 15 </body> 16 17 </html>
效果展示：
很明显文本输入框直接看不见了。
④placeholder输入提示属性
这个属性可以让输入框中出现提示，当用户输入信息时会消失，但是当用户将内容清空后会再次出现提示。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <!-- 使用placeholder输入提示属性 --> 13 这是我的名字：<input type="text" placeholder="张三"> 14 </form> 15 </body> 16 17 </html>
效果展示：
输入前进行提示：
输入时的效果：
清空输入内容后：
⑤autofocus自动聚焦属性
这个属性是当用户刷新网页后鼠标会自动聚焦到输入框中，但是注意一点自动聚焦在整个网页中只能出现一次这个属性
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <!-- 在第一个输入文本框中添加autofocus属性，让整个网页聚焦到这个文本框中 --> 13 这是我的名字1<input type="text" placeholder="张三" autofocus><br> 14 这是我的名字2<input type="text" placeholder="李四"><br> 15 这是我的名字3<input type="text" placeholder="王五"><br> 16 这是我的名字4<input type="text" placeholder="老牛"><br> 17 这是我的名字5<input type="text" placeholder="李华"> 18 </form> 19 </body> 20 21 </html>
效果展示：
HTML表单-----文本域
文本域可以让我们输入多行内容的一个容器，它的使用<textarea>标签实现。
<textarea>标签是一个双标签，作用是提供一个容器让用户可以输入多行内容。
其中里面常见的属性：
①cols
语法：cols=数量
表示这个文本域的宽度能容纳多少个字母
②rows
语法：rows=数量
表示这个文本域有多少行
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <!-- 这是一个文本域 --> 13 <textarea cols="30" rows="10"></textarea> 14 </form> 15 </body> 16 17 </html>
效果展示：
HTML表单-----变量与按钮绑定
这个主要是当有一个单选框，或多选框的时候，想让用户点击数字/内容就可以实现点击单选框或多选框。
想要实现这样的效果需要用到<label>标签
思路： ①使用<label>标签将数字或内容包起来 ②在<label>标签中使用for属性，语法：for="变量名" ③相互绑定的做法： 使用<input>标签中使用id属性，语法：id="label中for属性的变量名"
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <form action="http://www.baidu.com"> 12 <label for="nan">男</label><input type="radio" id="nan" name="gender"> 13 <label for="nv">女</label><input type="radio" id="nv" name="gender"> 14 </form> 15 </body> 16 17 </html>
效果展示：
可以点击男或女就会分别选中不同的单选按钮。