python 之前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签）-python黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

进击的巨人

1110

文章

876272

访问

+关注

分类

暂无分类

日期归档

2023-05(3)

python 之前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签）

发布于2019-08-17 14:58 阅读(1169) 评论(0) 点赞(4) 收藏(2)

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>