html前端学习二：表单

最新推荐文章于 2024-04-30 08:58:14 发布

myt2000

最新推荐文章于 2024-04-30 08:58:14 发布

阅读量220

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/myt2000/article/details/103660374

版权

html 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

表单

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:

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">男&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)]

myt2000

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html前端学习二：表单

表单input标签type属性text 文本，页面可视password 密码，页面不可视radio 单选按钮如果name值一样，就是单选按钮，否则可以多选checkbox 多选方框submit 提交属性，在form标签中可将页面数据传输 value值可以修改数据button 通过value添加按钮名称只能通过JS功能判断reset 重置点击后重置hidde...
复制链接

扫一扫

专栏目录