• form表单中的属性和标签


    form表单标签

    表单标签:form(非常重要,必须掌握)

    form标签用于获取用户跟浏览器交互(包含输入,选择,上传文件等操作)的数据,并将数据打包发给服务端

    属性

    • action:控制数据的提交路径

    action="":默认向当前页面所在的地址提交数据

    action="全路径":向当前的绝对路径的地址提交数据

    action="/index/":后缀文件,将该后缀跟当前页面的地址进行拼接,并将数据提交到这个页面中

    • method:控制数据的提交方式(也就是请求首行中的请求方式),默认get

    method="get":提交方式为get方式

    method="post":提交方式为post方式

    • enctype:控制数据提交的编码格式,默认为application/x-www-form-urlencoded

    enctype="application/x-www-form-urlencoded":只能提交数据

    enctype="multipart/form-data":可发送提交文件请求

    form中的标签

    input:文本框(百变金刚),可通过type属性设置成不同类型的文本框

    • type="text" 普通文本框

    <p>

        <!--

            labal标签,通过for="input标签的id值"

            让用户在点击文本时,直接聚焦到对应的input标签中

        -->

        <label for="name">用户名:

            <!--input标签 type="text":普通文本框

                value="username":文本框内默认值是username

                placeholder="用户名文本框":没有填写内容时,文本框的作用的提示信息

            -->

            <input type="text" id="name" value="username" placeholder="用户名文本框">

        </label>

    </p>

    • type="password" 密文文本框 在该文本框输入任何文本,都会用密文的形式显示

    <p>

        <label for="pwd">密码:

            <!--input标签 type="password":密文文本框,即输入的内容使用密码的形式显示-->

            <input type="password" id="pwd" placeholder="密码文本框">

        </label>

    </p>

    • type="date" 日历文本框

    <p>

        <label for="birth">生日:

            <!--input标签 type="date":日历文本框-->

            <input type="date" id="birth">

        </label>

    </p>

    • type="radio" 单选按钮

    <p>

        <label>性别:

            <!--input标签 type="radio":单选按钮;

                name:属性,表示标签名称,如果多个按钮的是一组单选按钮,那么它们的name属性是一致的

                checked:属性,表示当前按钮被选中,这里是一个简写方式,正规写法是checked="checked"

                ps:当属性值和属性名一致时,可以直接简写成属性名

            -->

            <input type="radio" name="gender" checked>男

            <input type="radio" name="gender">女

        </label>

    </p>

    • type="checkbox" 复选按钮

    <p>

        <label>爱好:

            <!--input标签 type="checkbox":复选按钮

                name:属性,表示标签名称,如果多个按钮的是一组复选按钮,那么它们的name属性是一致的

                checked:属性,表示当前按钮被选中

            -->

            <input type="checkbox" name="hobby">阅读

            <input type="checkbox" name="hobby">K歌

            <input type="checkbox" name="hobby">跑步

            <input type="checkbox" name="hobby">画画

        </label>

    </p>

    • type="file" 上传文件按钮

    <p>

        <label for="open">

            <!--input标签 type="file"上传文件按钮,

                显示的文本根据不同的浏览器显示不同的结果可以跟系统交互,打开本地的文件

            -->

            <input type="file" id="open">

        </label>

    </p>

    • type="button" 普通按钮,没有任何功能,后期可自定义功能

    <!--input标签 type="button":普通按钮,没有任何功能,后期可自定义功能-->

    <label for="button">

        <input type="button" id="button" value="普通按钮">

    </label>

    • type="submit" 提交按钮,将当前按钮所在form标签中的数据提交到服务端,请求方式为POST

    <!--input标签 type="submit":提交按钮,将当前按钮所在form标签中的数据提交到服务端,请求方式为POST-->

    <label for="submit">

        <input type="submit" id="submit" value="提交">

    </label>

    • type="reset":重置按钮,将将当前按钮所在form标签中的数据清空

    <!--input标签 type="reset":重置按钮,将将当前按钮所在form标签中的数据清空-->

    <label for="reset">

        <input type="reset" id="reset" value="重置">

    </label>

    button:按钮

    <label for="cancel">

        <!--button标签 普通按钮

            跟input标签type="button"功能类似

            区别:button会刷新页面,input中的button按钮不会

        -->

        <button id="cancel">取消</button>

    </label>

    select:下拉框,跟option搭配使用

    <p>

        <label>省份:

            <!--select标签:下拉框

                multiple:属性,表示可以下拉框的选项允许多选

                下拉框中的选项通过option标签表示

            -->

            <select id="provences" multiple>

                <!--option标签:用来定义下拉列表中的可用选项-->

                <option value="">北京</option>

                <option value="">上海</option>

                <option value="">广州</option>

                <option value="">深圳</option>

                <option value="">武汉</option>

                <option value="">西安</option>

            </select>

        </label>

    </p>

    textarea:多行文本框

    <p>

        <label for="textarea">个人简介:

            <!--textarea标签:多行文本框,可以输入多行记录

                cols:文本内可显示的文本宽度,不建议使用这种方式

                rows:文本内可显示文本的行数,超出后,会出现滚动条

            -->

            <textarea name="" id="textarea" cols="60" rows="10">

     

            </textarea>

        </label>

    </p>

  • 相关阅读:
    运行出现Server Tomcat v8.5 Server at localhost failed to start.和A child container failed during start
    com.microsoft.sqlserver.jdbc.SQLServerException: Socket closed 或者 该连接已关闭
    java反射 反射构造函数 报 wrong number of arguments 错误
    视高盛景企业级移动应用解决方案 让一次开发实现多平台应用
    你知道现在的.net是什么样的吗,一张图告诉你
    Azure 项目构建 – 构建直播教学系统之媒体服务篇
    Azure 项目构建 – 构建和部署 .NET 应用程序
    基于 Azure IaaS 搭建企业官网的规划和实践
    这么大一座Azure“图书馆”,你竟没有发现…
    Azure 进阶攻略 | 关于Java 和事件中心的那不得不说的事
  • 原文地址:https://www.cnblogs.com/wfy680/p/14537269.html
Copyright © 2020-2023  润新知