html前端学习二：表单

HTML表单详解
原创 于 2019-12-23 09:45:37 发布 · 268 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入讲解HTML表单的各种元素和属性，包括input标签的不同类型如text、password、radio、checkbox等，以及submit、reset和hidden的使用场景。同时，探讨了label、textarea、select和option的运用技巧，以及form表单的method属性和路由跳转。

表单

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"/>男&nbsp;&nbsp;
    	<input type="radio" name="gender"/>女&nbsp;&nbsp;
    	<input type="radio" name="gender"/>不清楚&nbsp;<br><br/>

   	业余爱好:
   		<input type="checkbox" />听音乐&nbsp;&nbsp;
   		<input type="checkbox" />唱歌&nbsp;&nbsp;&nbsp;
   		<input type="checkbox" />学习&nbsp;&nbsp;
   		<input type="checkbox" />唱歌&nbsp;&nbsp;
   		
   		
   	<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:

  1. 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地址栏字数限制

  1. 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">男&nbsp;&nbsp;</label>

效果：点击文字内容即可选择，不用点击圆点

用label标签快速包裹内容
选择要包裹的内容
alt+shift+w  

出现p标签

敲击label标签

pre标签格式化

显示源代码用的

    <pre>
    	&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="keyword" content="" /&gt;
    &lt;meta name="description" content="" /&gt;
    &lt;title&gt;pre格式化&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;pre&gt;
    	
    &lt;/pre&gt;
&lt;/body&gt;
&lt;script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
	
	
&lt;/script&gt;
    </pre>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CCMfrPpY-1577065506764)(http://img0.ph.126.net/Diu7ea-7Mu0-apk-8XRRhw==/6632448752307365700.png)]

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值