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、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并
python 之 前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签）的更多相关文章
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
- python自动化开发-[第二十二天]-bbs多级评论、点赞、上传文件
今日概要: 1.related_name和related_query_name的区别 2.through_fields的用途 3.django的事务提交 4.点赞的动画效果 5.多级评论的原理 6.上 ...
- WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法
由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...
- [转载红鱼儿]Delphi实现微信开发（3）如何使用multipart/form-data格式上传文件
开始前,先看下要实现的微信接口,上传多媒体文件,这个接口是用Form表单形式上传的文件.对我来说,对http的Form表单一知半解,还好,查到这个资料,如果你也和我一样,必须看看这篇文章. 在xali ...
- 【python】用python脚本Paramiko实现远程执行命令、下载、推送/上传文件功能
Paramiko: paramiko模块,基于SSH用于连接远程服务器并执行相关操作. SSHClient: 用于连接远程服务器并执行基本命令 SFTPClient: 用于连接远程服务器并执行上传下载 ...
- C#开发BIMFACE系列4 服务端API之源上传文件
在注册成为BIMFACE的应用开发者后,要能在浏览器里浏览你的模型或者获取你模型内的BIM数据, 首先需要把你的模型文件上传到BIMFACE.根据不同场景,BIMFACE提供了丰富的文件相关的接口. ...
- 巧妙利用label标签实现input file上传文件自定义样式
提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可 但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同 我们往 ...
- input file上传文件弹出框的默认格式设置
我们使用html的input 标签type="flie"时,如何设置默认可选的文件格式 <input id="doc_file" type="f ...
- input标签type="file"上传文件的css样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 雪花ID实现新增数据同步
雪花ID实现新增数据同步 GUID生成的ID,可以确保是唯一ID,但却是无序的,不适合用于数据同步. 雪花算法生成的ID(INT64)能够按照时间有序(升序)生成.只要电脑上的时间是正确的,新增的记录 ...
- CAT中实现异步请求的调用链查看
CAT简介 CAT(Central Application Tracking),是美团点评基于 Java 开发的一套开源的分布式实时监控系统.美团点评基础架构部希望在基础存储.高性能通信.大规模在线访 ...
- useContext 让父子组件传值更简单（五）
有了useState和useEffect已经可以实现大部分的业务逻辑了,但是React Hooks中还是有很多好用的Hooks函数的,比如useContext和useReducer. 在用类声明组件时 ...
- android x86 安装
1.下载页面 http://www.android-x86.org 下载了: android-x86-8.1-r2.iso 用Win32DiskImager制作usb启动盘. 参考: https:// ...
- 深拷贝（deep clone）与浅拷贝（shallow clone）
一.浅复制和深复制概念 浅复制(浅克隆): 被复制对象的所有变量都含有与原来对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不是复制它所引用的对象. 深 ...
- gdbhooks 栈信息
https://devguide.python.org/gdb/ https://sourceware.org/gdb/current/onlinedocs/gdb/Python.html#Pytho ...
- Springmvc & Report： FineReport vs BIRT vs Jasperreport
Springmvc与jasperreport结合生成报表的一种方法 - OneThin的个人空间 - OSCHINAhttps://my.oschina.net/onethin/blog/14360 ...
- ubuntu系统TCP连接参数优化-TIME_WAIT过多解决办法
状态:描述CLOSED:无连接是活动的或正在进行LISTEN:服务器在等待进入呼叫SYN_RECV:一个连接请求已经到达,等待确认SYN_SENT:应用已经开始,打开一个连接ESTABLISHED:正 ...
- logrotate机制&原理
logrotate机制&原理 centos系统中默认安装logrotate,logrotate主配置文件:/etc/logrotate.conf,其中定义了系统默认的logrotate规则,当 ...
- 反射load,loadfile,LoadFrom区别
反射加载数据用法 Load Assembly assembly = Assembly.Load("Ruanmou.DB.MySql");//dll名称无后缀 从当前目录加载dll ...