zoukankan      html  css  js  c++  java
  • form表单之select标签

    <select> 下拉选标签属性

    '''
    name:表单提交项的键.
    
              size:展示个数
    
              multiple:multiple 多选
    
                     <option> 下拉选中的每一项 属性:
    
                           value:表单提交项的值.   selected: selected下拉选默认被选中
    
                     <optgroup>为每一项加上分组
    '''

     <textarea> 文本域

    '''
    name:    表单提交项的键.
    
    cols:    文本域默认有多少列
    
    rows:    文本域默认有多少行
    '''

    <label>

    '''
    <label for="www">姓名</label>
    <input id="www" type="text">
    '''

    <fieldset>

    '''
    <fieldset>
        <legend>登录吧</legend>
        <input type="text">
    </fieldset>
    '''
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="form表单之select标签">
        <meta name="description" content="study">
        <meta http-equiv="Refresh" content="60;https://www.baidu.com">
        <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">
        <title>Title</title>
        <!--<link rel="stylesheet" href="css.css">-->
        <link rel="icon" href="https://www.baidu.com/favicon.ico">
        <!--<script src="hello.js"></script>-->
    </head>
    <body>
        <form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data">
            <p>爱好:篮球<input type="checkbox" name="hobby" value="ball1" checked> 足球<input type="checkbox" name="hobby" value="ball2"></p>
            <p>性别:男<input type="radio" name="gender" value="men" checked><input type="radio" name="gender" value="women"></p>
            <!--input标签checked属性代表checkbox和radio默认被选中-->
            <p><input type="text"  name="tips" value="text和password不可输入" readonly></p>
            <!--input标签readonly属性代表只读(text和password)-->
            <p><input type="text" name="tips1" value="对所有input标签都适用" disabled></p>
            <!--input标签disabled属性也是只读,对所有input标签都适用-->
    
            省份<select name="province" multiple size="5">
                <optgroup label="南方">
                    <option value="guangdong">广东省</option>
                    <option value="jiangxi" selected>江西省</option>
                    <!--默认选中江西省-->
                    <option value="hunan">湖南省</option>
                    <option value="hubei">湖北省</option>
                    <option value="guangxi">广西省</option>
                    <option value="jiangsu">江苏省</option>
                </optgroup>
                <optgroup label="北方">
                    <option value="heilongjiang">黑龙江省</option>
                    <option value="jilin">吉林省</option>
                    <option value="liaoning">辽宁省</option>
                    <option value="河北">河北省</option>
                    <option value="henan">河南省</option>
                    <option value="shanxi">山西省</option>
                </optgroup>
            </select><br>
            <!--select标签为下拉框选项,name属性为表单提交项的键,multiple属性为多选(页面操作需要加上shift),size为默认展示几条数据-->
            <!--optgroup为每一项加上分组,label属性为显示信息-->
            <!--option下拉选中的每一项,value属性为表单提交项的值,selected属性为下拉选默认被选中-->
    
            <br>简介<textarea name="desc" cols="30" rows="10"></textarea><br>
            <!--textarea标签为文本域,name属性为表单提交项的键,cols属性为文本域默认多少列,rows属性为文本域默认多少行-->
    
            <br><label for="1qwe">身高:</label>
            <input type="text" id="1qwe"><br>
            <!--label标签能与输入框进行关联,for属性值与输入框id属性值一样既能相关联,即点击该文本区域光标就能显示在指定输入框进行输入操作-->
    
            <br><fieldset>
                <legend>温馨提示:</legend>
                <input type="text" name="tips2" value="天气干燥,要多喝水" disabled>
            </fieldset><br>
            <!--fieldset标签只是一个样式展示-->
    
            <input type="submit" value="提交">
        </form>
    </body>
    </html>
    '''
    form表单标签总结:
    <form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data">
        姓名:<input type="text" name="username" placeholder="姓名" readonly>
        密码:<input type="password" name="pwd" placeholder="密码" disabled>
        爱好:篮球<input type="checkbox" name="hobby" value="basketball" checked>
        性别:男<input type="radio" name="gender" value="men" checked>
        文件:<input type="file" name="filename">
        
        <input type="reset" value="重置">
        <input type="button" value="提交">
        <input type="submit" value="提交">
        
        <select name="表单提交项键" multiple size="5">
            <optgroup label="组名">
                <option value="表单提交项值" selected>选项信息</option>
            </optgroup>
        </select>
        
        简介:<textarea name="desc" cols="30" rows="10">
        </textarea>
    
        <label for="123">身高:</label>
        <input id="123" type="text" placeholder="身高">
        
        <fieldset>
            <legend>
                温馨提示:
            </legend>
            <input type="text" name="tips" value="小心谨慎" disabled>
        </fieldset>
    </form>
    '''
    while True: print('studying...')
  • 相关阅读:
    Asp.Net Core 轻松学-被低估的过滤器
    Asp.Net Core 轻松学-利用文件监视进行快速测试开发
    Asp.Net Core 轻松学-利用xUnit进行主机级别的网络集成测试
    Asp.Net Core 轻松学-HttpClient的演进和避坑
    Asp.Net Core 轻松学-基于微服务的后台任务调度管理器
    Asp.Net Core 轻松学-一行代码搞定文件上传
    .NET Core 2.2 新增部分功能使用尝鲜
    Asp.NetCore轻松学-业务重点-实现一个简单的手机号码验证
    Asp.Net Core 轻松学-实现跨平台的自定义Json数据包
    Asp.Net Core 轻松学-利用 Swagger 自动生成接口文档
  • 原文地址:https://www.cnblogs.com/xuewei95/p/14903448.html
Copyright © 2011-2022 走看看