VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > Python基础教程 >

  • 前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列

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"