zoukankan      html  css  js  c++  java
  • HTML--Boby内标签之多行文本及下拉框


     随笔记录方便自己和同路人查阅。

    #------------------------------------------------我是可耻的分割线-------------------------------------------

    1、多行文本代码是<textarea></textarea>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <form enctype="multipart/form-data">
            <p>描述</p>
            <textarea></textarea>
            <input type="submit" value="提交"/>
            <input type="reset" value="重置">
        </form>
    </body>
    </html>

    结果展示:

    输入内容可以换行

    给多行文本增加默认值,在<textarea></textarea>标签内输入文本就是默认值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <form enctype="multipart/form-data">
            <p>描述</p>
            <textarea>这里填写描述内容</textarea>
            <input type="submit" value="提交"/>
            <input type="reset" value="重置">
        </form>
    </body>
    </html>

    结果展示:

    不要忘记加上name属性,因为像后台提交数据都需要

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <form enctype="multipart/form-data">
            <p>描述</p>
            <textarea name="moe">这里填写描述内容</textarea>
            <input type="submit" value="提交"/>
            <input type="reset" value="重置">
        </form>
    </body>
    </html>

    结果展示:

    2、下拉框是<select>标签加 <option>标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <form enctype="multipart/form-data">
            <p>下拉选项</p>
            <select>
                <option>北京</option>
                <option>上海</option>
                <option>南京</option>
                <option>成都</option>
            </select>
            <input type="submit" value="提交"/>
            <input type="reset" value="重置">
        </form>
    </body>
    </html>

    结果展示:

    代码优化,加上namevalue属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <form enctype="multipart/form-data">
            <p>下拉选项</p>
            <select name="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">南京</option>
                <option value="4">成都</option>
            </select>
            <input type="submit" value="提交"/>
            <input type="reset" value="重置">
        </form>

    </body>
    </html>

    结果展示:

    现在默认展示为北京,但是我想默认选择为南京,怎么办呢:

    !DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <form enctype="multipart/form-data">
            <p>下拉选项</p>
            <select name="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3" selected="selected">南京</option>
                <option value="4">成都</option>
            </select>
            <input type="submit" value="提交"/>
            <input type="reset" value="重置">
        </form>
    </body>
    </html>

    结果展示:

    这样就可以提交下拉框选择的内容了,但是有一个问题是不能多选,继续优化加上size属性让用户可以都看所有选项,加入multiple属性可以多选

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <form enctype="multipart/form-data">
            <p>下拉选项</p>
            <select name="city" size="10" multiple="multiple">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3" selected="selected">南京</option>
                <option value="4">成都</option>
            </select>
            <input type="submit" value="提交"/>
            <input type="reset" value="重置">
        </form>
    </body>
    </html>

    结果展示:按上Ctrl键加鼠标点选

    3、下拉框分组:<optgroup>

    该标签是给下拉框分组,不可选

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>input系列</title>
    </head>
    <body>
        <form enctype="multipart/form-data">
            <p>下拉选项</p>
            <select name="city" size="10" multiple="multiple">
                <optgroup label="中国">
                    <option value="1">北京</option>
                    <option value="2">上海</option>
                    <option value="3" selected="selected">南京</option>
                    <option value="4">成都</option>
                </optgroup>
            </select>
            <input type="submit" value="提交"/>
            <input type="reset" value="重置">
        </form>
    </body>
    </html>

    结果展示:

  • 相关阅读:
    通过JDBC连接HiveServer2
    HDP-2.6.1安装
    VMWare虚拟机NAT模式静态IP联网配置
    基于ansj_seg和nlp-lang的简单nlp工具类
    修改ES使用root用户运行
    使用MapReduce将HDFS数据导入到HBase(三)
    HBase表操作
    使用SpringMVC解决Ajax跨域问题
    SpringBoot之Web开发——webjars&静态资源映射规则
    thymeleaf+springboot找不到html,只返回了字符串
  • 原文地址:https://www.cnblogs.com/lirongyang/p/11250620.html
Copyright © 2011-2022 走看看