python 之 前端开发（form标签、单选框、多选框…
2019-08-13 08:35:23来源：博客园 阅读 ()
11.25 form标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> #提交信息的链接地址 <form action="a/b/c/login" method="get"> <p> 用户名: #name对应的是提交时的key <input type="text" name="username" value="EGON"> #value:表单里写好的默认内容 <input type="text" name="username" placeholder="请输入用户名">#placeholder：暗色的提示信息 <input type="text" name="username" value="egon" disabled="disabled"> </p> #disabled：内容不可更改，也不会提交服务端 <p> #readonly: 内容不可更改，但会提交服务端 密码: #密码输入时会被遮挡 <input type="password" name="password" placeholder="密码长度不能超过16位"> </p> <p> <input type="submit" value="登录"> #登录按钮，没有value时显示提交 </p> </form> </body> </html>
11.251 单选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com" method="get"> <p> 性别: #选择后提交gender=male <input type="radio" name="gender" value="male" checked="checked">男#checked表示默认选择 <input type="radio" name="gender" value="female">女 #选择后提交gender=female </p> #二者仅选其一 <p> <input type="submit" value="注册"> #注册按钮 </p> </form> </body> </html>
11.252 多选框、file上传文件、按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com" method="get"> <p> 爱好: #选择后提交hobbies=basketball <input type="checkbox" name="hobbies" value="basketball">篮球 <input type="checkbox" name="hobbies" value="football" checked="checked">足球 <input type="checkbox" name="hobbies" value="pingpang" checked>乒乓球 #checked表示默认选择 </p> <p> #选择提交后 uploadfile='选择的文件名' <input type="file" name="uploadfile"> #选择文件按钮,点击选择本地文件 </p> <p> <input type="submit" value="注册"> #注册按钮，没有value时显示提交，提交表单 <input type="button" value="注册" onclick="alert(123)">#普通按钮，点击显示alert内的提示信息 <input type="image" src="1.jpg" onclick="alert(1)"> #图片按钮,点击显示alert内的提示信息,且跳转 <input type="reset" value="重置" > #重置按钮，点击form表单清空 <input type='date' name="y-m-d" > #选择日期，选择后提交y-m-d=选择的日期 <button>按钮</button> #button在form中可以做提交按钮用，在form外是普通按钮 </p> </form> </body> </html>
11.253 label标签
对于选择框，点击选择框后的文字也能实现选择；对于文本框，点击文字选择文本框并光标聚焦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com" method="get"> <p> #name对应的是提交时的key <label for="el">用户名:</label><input type="text" name="username" value="EGON" id='e1'> #input添加id,label根据id名找到输入框并光标聚焦 #value:表单里写好的默认内容 </p> <p> 性别： #选择后提交gender=male input添加id,label根据id名找到单选框，并选择 <input type="radio" name="gender" value="male" id="ml"><label for="ml">男</label> <input type="radio" name="gender" value="female" id="fl"><label for="fl">女</label> </p> <p> 爱好: #选择后提交hobbies=basketball input添加id,label根据id名找到多选框，并选择 <input type="checkbox" name="hobbies" value="basketball" id="bb"><label for="bb">篮球</label> <input type="checkbox" name="hobbies" value="football" checked="checked" id="fb"><label for="fb">足球</label> </p> <p> <input type="submit" value="注册"> #注册按钮，没有value时显示‘提交’，提交表单 </p> </form> </body> </html>
11.254 下拉列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com" method="get"> <p> 城市： #选择后提交city=BJ/SH/SZ/GZ <select name="city" id="" size="2" multiple="multiple"> #下拉多选两个 <option value="BJ">北京</option> <option value="SH">上海</option> <option value="SZ" selected="selected">深圳</option> #selected表示默认选择 <option value="GZ">广州</option> </select> </p> <p> 城市： <select name="city" id="" style="width: 200px"> <optgroup label="一线城市"> #选项分组(label提示信息不能选择) <option value="BJ">北京</option> #选择后提交city=BJ/SH/SZ/GZ <option value="SH">上海</option> <option value="SZ" selected="selected">深圳</option> #selected表示默认选择 <option value="GZ">广州</option> </optgroup> <optgroup label="二线城市"> <option value="BJ">济南</option> <option value="SH">苏州</option> <option value="SZ" selected="selected">南京</option> <option value="GZ">成都</option> </optgroup> </select> </p> <p> <input type="submit" value="注册"> </p> </form> </body> </html>
11.255 textarea标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com" method="get"> <p> #填写后提交comment="输入的内容" cols和rows设置初始文本域大小 style设置不可重置文本域大小 <textarea name="comment" id="" cols="30" rows="3" style="resize: none"> 亲，给好评哈 #显示提前写入文本域的信息 </textarea> </p> <p> <input type="submit" value="注册"> </p> </form> </body> </html>
11.256 fieldset标签
<body> <form action="https://www.baidu.com" method="get"> <fieldset> #设置方框样式表单 <legend>注册页面</legend> <p> ..... </p> </fieldset> </form> </body>
11.26 table标签
水平对齐和垂直对齐:
#水平对齐: align 可以给table、tr、td标签设置, 垂直对齐: valign 只能给tr、td标签设置 强调：table只能设置水平方向 #========水平对齐=========== align=“left” align=“center” align=“right” 1 给table标签设置水平对齐，可以让表格在水平方向上对齐 2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐 3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准 ? #========垂直对齐=========== valign=“top” valign=“center” valign=“bottom” 1 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐 2 给td设置垂直对齐可以让当前单元格内容垂直对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> #border边框边界 cellspacing单元格边界 bgcolor表格边框背景颜色 <table border="0px" cellspacing="1px" bgcolor="aqua"> #cellpadding单元格内内容距单元格边框 <tr bgcolor="white"> #一行单元格背景颜色 <td >姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr bgcolor="white"> <td>egon1</td> <td>male</td> <td>18</td> </tr> </table> </body> </html>
11.261 表格结构
<table border="1" cellspacing="1px" bgcolor="black" width="300px" height="300px">#表格宽度和高度 <caption>学员信息统计</caption>#1、表格的标题 <thead> #2、表格的表头 <tr bgcolor="white"> <th>姓名</th> #表头行加粗，居中 <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> #3、表格的主体 <tr bgcolor="white"> <td>egon</td> <td>male</td> <td>18</td> </tr> </tbody> <tfoot> #4、表尾 <tr bgcolor="white"> <td>3</td> <td>3</td> <td>3</td> </tr> </tfoot> </table>
11.262 单元格合并
1、水平向上的单元格colspan 可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待
2、垂直向上的单元格rowspan 可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待
<table border="0px" cellspacing="1px" bgcolor="aqua" width="200px" height="200px"> <tr bgcolor="white"> <td colspan="2"></td> #第一行第一列向后合并一个单元格 <td></td> #相应删除一个列 </tr> <tr bgcolor="white"> <td></td> <td></td> <td rowspan="3"></td> #第二行第三列向下合并两个单元格 </tr> <tr bgcolor="white"> <td></td> #相应的这两行都只有两列 <td></td> </tr> <tr bgcolor="white"> <td></td> <td></td> </tr> </table>
注意: 1、由于把某一个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格 2、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并
原文链接:https://www.cnblogs.com/mylu/p/11342759.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：python_公共方法
相关文章
- python3基础之“术语表（2）” 2019-08-13
- python3 之 字符串编码小结（Unicode、utf-8、gbk、gb2312等 2019-08-13
- Python3安装impala 2019-08-13
- 小白如何入门 Python 爬虫？ 2019-08-13
- python_字符串方法 2019-08-13
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签