HTML表单显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>
<body>
<!--创建一个个人信息注册的表单界面,包含用户名,密码,确认密码,性别(单选)
兴趣爱好(多选),国籍(下拉列表),隐藏域,自我评价(多行文本域),重置,提交
-->
<!--
form标签就是表单
    input type=text     是文本输入框     value设置默认显示内容
    input type=password 是密码输入框     value设置默认显示内容
    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>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称:</td>
            <td><input type="text" value="默认值"><br></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"><input type="radio" name="sex" checked="checked"></td>
        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td><input type="checkbox" checked="checked">java<input type="checkbox">cpp<input type="checkbox">python</td>
        </tr>
        <tr>
            <td>国籍:</td>
            <td><select>
                <option>--请选择国籍</option>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>英国</option>
            </select></td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td><textarea rows="5" cols="10">我是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" value="重置"><br></td>
            <td align="center"><input type="submit"></td>
            <td> <input type="hidden" name="abc" value="abcValue"></td>
        </tr>
    </table>
</form>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>
<body>
<!--
    form标签是表单标签
    action属性设置提交的服务器地址
    method属性设置提交的方式是GET(默认)或者POST

    表单提交的时候,数据没有发送给服务器的三种情况:
        1.表单项中没有name属性
        2.单选,复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器
        3.表单项不在提交的form标签中
        
        
    Get请求的特点:
        1.浏览器地址栏中的地址是:action属性[+?+请求参数],请求参数的格式是:name=value&name=value
        2.不安全
        3.有长度限制
    POST请求的特点:
        1.浏览器地址栏中只有action属性值
        2.相对于GET请求安全
        3.理论上没有长度限制
-->
<form action="http://localhost:8080" method="get">
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称:</td>
            <td><input type="text" name="username" value="james"><br></td>
        </tr>
        <tr>
            <td>用户密码:</td>
            <td><input type="password" name="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" value="boy"><input type="radio" name="sex" value="girl" checked="checked"></td>
        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td><input type="checkbox" checked="checked" name="hobby" value="java">java
                <input type="checkbox" name="hobby" value="cpp">cpp
                <input type="checkbox" name="hobby" value="python">python</td>
        </tr>
        <tr>
            <td>国籍:</td>
            <td><select name="country">
                <option value="none">--请选择国籍</option>
                <option selected="selected" value="cn">中国</option>
                <option value="usa">美国</option>
                <option value="uk">英国</option>
            </select></td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td><textarea name="desc" rows="5" cols="10">我是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" value="重置"><br></td>
            <td align="center"><input type="submit"></td>
            <td> <input type="hidden" name="action" value="login"></td>
        </tr>
    </table>
</form>
</body>
</html>

点击提交后浏览器地址栏中的地址

http://localhost:8080/?username=james&password=abc&sex=girl&hobby=java&country=cn&desc=我是默认值&action=login
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pk5515

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值