Java-Web中表单的应用

最新推荐文章于 2024-04-09 17:07:58 发布

胖大师

最新推荐文章于 2024-04-09 17:07:58 发布

阅读量576

点赞数

分类专栏： web Java 笔记文章标签： html css java web

本文链接：https://blog.csdn.net/qq_45146250/article/details/113032010

版权

笔记同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

Java

33 篇文章 2 订阅

订阅专栏

web

4 篇文章 0 订阅

订阅专栏

Java-Web中表单的应用

1、表单标签---form

2、表单的提交---get和post

表单标签

表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

需求：创建一个个人信息注册信息表单界面，包含用户名、密码、确认密码、性别（单选），

兴趣爱好（多选），国籍（下拉列表），隐藏域，自我评价（多行文本域），重置，提交，

form    标签就是表单

    input type="text"   是文件输入框 value 设置默认显示内容

    input type="password"   是密码输入框

    input type="radio" 是单选框    name 属性可以对其进行分组     checked="checked" 表示默认选中

    input type="checkbox"   是复选框     checked="checked" 表示默认选中

    input type="reset" 是重置按钮   value 属性修改按钮上的文本

    input type="submit" 是提交按钮   value 属性修改按钮上的文本

    input type="button" 是按钮      value 属性修改按钮上的文本

    input type="file" 是文件上传域

    input type="hidden" 是隐藏域    当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

    select 标签是下拉列表框

    option 标签是下拉列表框中的选项   selected="selected" 设置默认选中

    textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）

        rows 属性设置可以显示几行的高度

        cols 属性设置每行可以显示几个字符宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--表单标签
        表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器
        需求：创建一个个人信息注册信息表单界面，包含用户名、密码、确认密码、性别（单选），
        兴趣爱好（多选），国籍（下拉列表），隐藏域，自我评价（多行文本域），重置，提交，

        form    标签就是表单
            input type="text"   是文件输入框  value  设置默认显示内容
            input type="password"   是密码输入框
            input type="radio"  是单选框    name 属性可以对其进行分组     checked="checked" 表示默认选中
            input type="checkbox"   是复选框     checked="checked" 表示默认选中
            input type="reset"  是重置按钮   value 属性修改按钮上的文本
            input type="submit" 是提交按钮   value 属性修改按钮上的文本
            input type="button" 是按钮      value 属性修改按钮上的文本
            input type="file"  是文件上传域
            input type="hidden" 是隐藏域    当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交 的时候同时发送给服务器）

            select 标签是下拉列表框
            option 标签是下拉列表框中的选项   selected="selected" 设置默认选中

            textarea  表示多行文本输入框（起始标签和结束标签中的内容是默认值）
                rows 属性设置可以显示几行的高度
                cols 属性设置每行可以显示几个字符宽度
    -->
    <form action="">
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>用户名称：</td>
                <td>
                    <input type="text" value="默认值"/>
                </td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td>
                    <input type="password" value="abc">
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td>
                    <input type="password" value="abc">
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" checked="checked">男
                    <input type="radio" name="sex">女
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td>
                    <input type="checkbox">Java
                    <input type="checkbox" checked="checked">JavaScript
                    <input type="checkbox">C++
                </td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td>
                    <select name="" id="">
                        <option value="">---请选择国籍---</option>
                        <option selected="selected" value="" >中国</option>
                        <option value="">美国</option>
                        <option value="">日本</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td>
                    <textarea name="" id="" cols="30" rows="10">我才是默认值</textarea>
                </td>
            </tr>
            <tr>
                <td><input type="reset" value="重置"></td>
                <td align="center"><input type="submit" value="提交"></td>
            </tr>
            <tr>
                <td><input type="button" value="abc"></td>
                <td align="center"><input type="file" value="选择文件"></td>
            </tr>
        </table>

</form>
</body>
</html>

表单的提交

form 标签是表单标签
    action 属性设置提交的服务器地址
    method 属性设置提交的方式GET（默认值）或POST
    点击提交后：跳转  http://localhost:8080/?action=login&sex=on
        http://localhost:8080/  Action的属性值（服务器地址）
        ?   分隔符
        action=login&sex=on 请求参数（表单的信息）

    1、表单提交的时候，数据咩有发送给服务器的三种情况
        1、表单项没有name属性
        2、单选，复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
        3、表单项不在提交的form标签中

    2、GET请求的特点是：
        1、浏览器地址栏中的地址是：action属性[+?+请求参数]
            请求参数的格式是：name=value&name=value:
                password=abc & sex=boy & hobby=JavaScript
        2、不安全
        3、它有数据长度的限制（不超过100个字符）

    3、POST请求的特点：
        1、浏览器地址栏中只有action属性值
        2、相对于get请求要安全
        3、理论上没有数据长度的限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        form 标签是表单标签
            action 属性设置提交的服务器地址
            method 属性设置提交的方式GET（默认值）或POST
            点击提交后：跳转  http://localhost:8080/?action=login&sex=on
                http://localhost:8080/  Action的属性值（服务器地址）
                ?   分隔符
                action=login&sex=on 请求参数（表单的信息）

            1、表单提交的时候，数据咩有发送给服务器的三种情况
                1、表单项没有name属性
                2、单选，复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
                3、表单项不在提交的form标签中

            2、GET请求的特点是：
                1、浏览器地址栏中的地址是：action属性[+?+请求参数]
                    请求参数的格式是：name=value&name=value:
                        password=abc & sex=boy & hobby=JavaScript
                2、不安全
                3、它有数据长度的限制（不超过100个字符）

            3、POST请求的特点：
                1、浏览器地址栏中只有action属性值
                2、相对于get请求要安全
                3、理论上没有数据长度的限制
    -->
    <form action="http://localhost:8080" method="post">
        <input type="hidden" name="action" value="login">
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>用户名称：</td>
                <td>
                    <input type="text" value="默认值"/>
                </td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td>
                    <input type="password" name="password" value="abc">
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" checked="checked" value="boy">男
                    <input type="radio" name="sex" value="girl">女
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td>
                    <input type="checkbox" name="hobby" value="Java">Java
                    <input type="checkbox" name="hobby" checked="checked" value="JavaScript">JavaScript
                    <input type="checkbox" name="hobby" value="C++">C++
                </td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td>
                    <select name="country" id="">
                        <option value="none">---请选择国籍---</option>
                        <option selected="selected" value="CN" >中国</option>
                        <option value="USA">美国</option>
                        <option value="JP">日本</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td>
                    <textarea name="desc" id="" cols="30" rows="10">我才是默认值</textarea>
                </td>
            </tr>
            <tr>
                <td><input type="reset" value="重置"></td>
                <td align="center"><input type="submit" value="提交"></td>
            </tr>
<!--            <tr>-->
<!--                <td><input type="button" value="abc"></td>-->
<!--                <td align="center"><input type="file" value="选择文件"></td>-->
<!--            </tr>-->
        </table>

</form>
</body>
</html>

胖大师

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Java-Web中表单的应用

Java-Web中表单的应用1、表单标签---form2、表单的提交---get和post表单标签表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器需求：创建一个个人信息注册信息表单界面，包含用户名、密码、确认密码、性别（单选），兴趣爱好（多选），国籍（下拉列表），隐藏域，自我评价（多行文本域），重置，提交，form 标签就是表单 input type="text" 是文件输入框 value 设置默认显示内容...
复制链接

扫一扫