表单
input标签
type属性
- text 文本,页面可视
- password 密码,页面不可视
- radio 单选按钮 如果name值一样,就是单选按钮,否则可以多选
- checkbox 多选方框
- submit 提交属性,在form标签中可将页面数据传输 value值可以修改数据
- button 通过value添加按钮名称 只能通过JS功能判断
- reset 重置 点击后重置
- hidden 隐藏传递信息,不是给用户使用的 主要用于提交给服务器 防止跨域攻击 反爬虫
账号:<input type="text" /><br/><br/>
密码:<input type="password" /><br/><br/>
确认密码:<input type="password" /><br/>
性别:
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
<input type="radio" name="gender"/>不清楚 <br><br/>
业余爱好:
<input type="checkbox" />听音乐
<input type="checkbox" />唱歌
<input type="checkbox" />学习
<input type="checkbox" />唱歌
<input type="submit" /><br/>
<input type="submit" value="注册" /><br/>
<input type="submit" value="重置" /><br/>
<input type="submit" value="取消" />
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-53nMpGQP-1577065506761)(http://img1.ph.126.net/nirdRyG7IeCsQUtJpymx2w==/6632737923862859377.png)]
reset button的应用例子
<form action="#" method="get">
账号:<input type="text" ><br/>
密码:<input type="text" ><br/>
<input type="button" name="aaa" value="点点我">
<input type="reset" />
<input type="hidden" name="hidden" value="abcdef12345">
<input type="submit">
</form>
hidden的提交效果,页面不显示
file:///D:/web%E5%AD%A6%E4%B9%A0/%E7%AC%AC%E4%B8%89%E8%AE%B2%20%E8%A1%A8%E5%8D%95form/%E8%A1%A8%E5%8D%95_button.html?hidden=abcdef12345#
?hidden=abcdef12345#
- 默认打勾状态
checked=“checked” 添加该属性默认打勾
<input id="musci" type="checkbox" name="music" checked="checked"/><label for="musci">听音乐</label>
select下拉列表框
配合option标签使用
option属性value,一般传给后台使用
生日:
<select>
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
</select>年
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>日
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t5ezqzdH-1577065506762)(http://img2.ph.126.net/CRU5FaTw84sNpeMruJc69w==/6632436657679451636.png)]
- select默认选择某个option
添加该属性selected="" 默认选择1996
<option selected="selected" value="1996">1996</option>
sublime实现多行选择
按住鼠标滚轮中键 选择多行
如果当行不一致的情况下 按住crtl+d 就可以针对多行不一致的相同属性内容进行修改(仅支持name和id属性)
多行数字编写
option{199$}*9 按TAB
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
option[value="KaTeX parse error: Expected '}', got 'EOF' at end of input: "]{}*12
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
emmet快捷键文档网址
https://docs.emmet.io/
https://docs.emmet.io/cheat-sheet/
多行输入文本框 textarea
textarea属性
cols 列
rows 行
<textarea cols="30" rows="10"></textarea>
页面下可拉大,最小为限定cols,rows值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sha9xxqP-1577065506763)(http://img1.ph.126.net/DCzF2ICUCZOOP4Ol_C6sBA==/6632471842051536610.png)]
form表单
在form标签之内的根据input标签的type="submit"提交后,就可以在url栏中看到传入属性
form属性
method:
- get 显式发送
查看方式:
file:///D:/web%E5%AD%A6%E4%B9%A0/%E7%AC%AC%E4%B8%89%E8%AE%B2%20%E8%A1%A8%E5%8D%95form/%E8%A1%A8%E5%8D%95.html?user=&pwd=&year=1991&month=1&day=1&description=dddd
问号拼接网络地址,通过name属性和value值传参
?user=&pwd=&year=1991&month=1&day=1&description=dddd
url地址栏字数限制
- post 隐式发送
post不存在传递参数大小限制
只有form表单中的其他标签有name属性的值的时候,提交的信息才会传递
post信息传递查看方式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wd68DIsH-1577065506763)(http://img1.ph.126.net/gtn-GiK-MfP8hNOXoMaXIA==/1285214743680613210.png)]
form表单路由跳转
本地跳转为#,其他可输入其他路由地址
<form action="#" method="post">
<form action="register.html" method="post">
label标签
id属性名字必须与label中的for值一致
<input id="man" type="radio" value="1" name="gender" /><label for="man">男 </label>
效果:点击文字内容即可选择,不用点击圆点
用label标签快速包裹内容
选择要包裹的内容
alt+shift+w
出现p标签
敲击label标签
pre标签格式化
显示源代码用的
<pre>
<html>
<head>
<meta charset="utf-8" />
<meta name="keyword" content="" />
<meta name="description" content="" />
<title>pre格式化</title>
</head>
<body>
<pre>
</pre>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
</script>
</pre>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CCMfrPpY-1577065506764)(http://img0.ph.126.net/Diu7ea-7Mu0-apk-8XRRhw==/6632448752307365700.png)]