python 之 前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签）
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、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并
