3.18 form表单元素
form表单元素
文本类: 文本框value是提交内容,按钮value是按钮显示的字
1 2 3 4 5 6 | < form action="11.html" method="get"> get安全性差,提交内容都能看见,post相反 < input type="text" name="a" value="111111" name="b"/> 文本框 < input type="password" value="111" name="p"/> 密码框,内容输入是隐藏的 < input type="hidden" name="sd" value="yyy"/> 隐藏域,看不到 < textarea name="t">文本域</ textarea > 双标签,内容写在中间 < input type="submit" value="按钮" /> </ form > |
post 显示提交内容
密码框显示
密码框用post提交
1 2 3 4 5 6 7 | < form action="11.html" method="get"> < input type="button" value="普通按钮" /> 没有提交作用,value是显示的 < input type="submit" value="提交按钮" /> value是显示的 < input type="reset" value="重置按钮" /> value是显示的 < input type="image" src="无标题.png" /> 图片按钮 value不是用来显示的 </ form > |
选择按钮:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < form action="11.html" method="get"> < input type="radio" value="nan" name="n" id="1" />男 < input type="radio" value="nv" name="n" />女 name需要相同才能单选 < label for="1">男</ label > 点击男字就可以选中 < input type="checkbox" value="" name="c" /> 复选框 < input type="checkbox" value="" name="c" /> < input type="file" /> 浏览,选择文件 < select > 下拉列表 < option >北京</ option > < option selected="selected">上海</ option > 默认选中加selected="selected" < option >深圳</ option > </ select > </ form > |
这是浏览,选择文件
这是下拉列表
其他属性:
1 2 3 4 5 | readonly="readonly" 只读,只能读 disabled="disabled" 不可用,不能提交,例:同意协议才能选定 hidden="hidden" 隐藏 checked="checked" 复选框默认选中 selected="selected" 用在下拉列表,设置默认选中 |
框架:
1 2 | < iframe src="afasdasd.html" scrolling="no" frameboder="0" width="300" height="200"> 可以嵌入页面 scrolling有无滚动条 </ iframe > |
1 2 3 4 | < frameset cols="200,*" > 有frameset不能用body *代表剩下的 < frame src="asdsad.html"> </ frameset > |
200,* 效果图
1 2 3 4 5 6 7 8 | < body > < marquee direction="right" behavior="scroll" scrollamount="20"> 内容文字</ marquee > 滚动默认右往左 right左往右 behavior=scroll是走一圈 scrollamount=20 是走动速度 < hr > 中国银行< mark >股市< mark >崩盘 突出显示 </ hr > 分隔线 </ body > |
hr分割线效果图
样式:
1 2 3 4 5 6 7 8 9 | 内联的 < head > </ head > < body > < div style="width:200px; height:100px;">这是内联</ div > </ body > 内联 style="........" 优点:控制精确 缺点:代码重用性差 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 内嵌的 < head > < style type="text/css"> a{ width:200px; height:100px; } </ style > </ head > < body > < div class="a"></ div > </ body > 优点:代码重用性比内联好 缺点:控制不精确 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | < head > < style type="text/css"> #b { width:200px; height:100px; } .a{ backgroung-color:#903; } span{ color:red; } #b,span{background-color:#0F0;} </ style > </ head > < body > < div id="b">背景</ div > < div class="a">背景1</ div > < div class="a">背景2</ div > < span >背景3</ span > < span >背景3</ span > < span >背景3</ span > </ body > id用# class用. 直接用标签 id名不能重复,class可以重复 |
1 2 3 4 5 6 7 8 | 外部 优点:代码的重用性要更好 选择文件,新建,css,保存 缺点:控制精度最差 < head > < link href="Untitled-4.css" /> 用来引css </ head > |
posted on 2018-03-19 16:21 sunyexiang 阅读(96) 评论(0) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步