一、表单标签<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属性
-
输入类型
<type="text">
<form action="" method="">
<input type="text" name="username">
</form>
在这里面可以输入内容
-
密码框
<type="password>"，用户输入密码，输入后信息会被伪装成小数点；
<form action="" method="">
<input type="password" name="password">
</form>
密码输入
-
复选框
<type="checkbox>",
①：复选框里面的name可以不一样，但是一样方便分类；
②：添加value方便后台区分你要勾选的选项。
复选框
-
单选框，
<type="radio">，用户只能选择一项。
①：name属性一定要有，而且每个选项的name必须相同，相同就会有排斥的作用，只能选一个才能实行单选；
②：value属性的值也要有，方便后台服务器区分，不添加后台服务器会显示on，不能获悉提交的内容。
单选框
-
隐藏，
<input type="hidden" name="上传到服务器该数据的key" value="上传到服务器的值"> -
提交按钮，
<type="submit">:
①：点击时会把当前form表单所有内容提交，其他表单内容不会提交。
②：可以修改value值改变按钮的显示文字。
<form action="xxx.php" method="get">
<input type="submit" >
<input type="submit" value="ok">
</form>
提交按钮
-
清空重置，
<type="reset">:点击即可重置表单内的内容。
<form action="xxx.php" method="get">
<input type="reset">
</form>
重置按钮
-
设置邮箱格式，
<type="email">:用户输入不是邮箱格式会有提示。
邮箱格式
-
文件选项，
<type="file">
点击选择文件就会跳转文件选项
-
数字输入框，
<type="number">
通过上下选择数字，只有数字
-
搜索框，
<type="search">
①：输入时特色是右边有一个x，没有输入就没有；
②：点击x就可以清空输入框
搜索框
-
日期选择框，
<type="date">
日期选择框
-
时间选择框，
<type="time">
时间选择框
-
进度条，
<type="range">
<form action="xxx.php" method="get">
<input type="range"
</form>
可以左右滑动
-
网址输入框，
<type="url">
输入不是网址就会有提示
- input 标签其他属性的用法
-
用户名:
<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>
输入框背景提示
-
获取焦点
<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>
输入框已经变成灰色无法输入
-
提交时提示用户输入信息
<required>
点击提交时，提示用户输入信息，不提交空白信息
-
切换顺序
<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，就是默认该选项
下拉菜单
参考：饥人谷课件
网友评论