【HTML】3 表单（重要）

推荐老杜的课，太带劲了（确信

表单的意义

  1. 收集用户信息
  2. form标签画表单
  3. 一个网页中可以有多个表单
  4. 表单最终需要提供给服务器
    action属性用来指定服务器地址
    它和href一样，都可以向服务器发送请求
  5. action里的链接是请求路径
    表单最终提交给该链接里对应端口的软件

表单包含的信息分类

  1. submit 表示该按钮是提交按钮
  2. button 是普通按钮，没有提交表单的能力
  3. text text
  4. password 密码
  5. checkbox 复选
  6. radio 单选
  7. select 下拉菜单
  8. textarea 文本域
    目前就会这些，之后再更新。
    下面是代码
<!DOCTYPE html>
<html>
    <head>
        <title>表单</title>
    </head>
    <!--
        1.收集用户信息
        2.form标签画表单
        3.一个网页中可以有多个表单
        4.表单最终需要提供给服务器
            action属性用来指定服务器地址
            它和href一样，都可以向服务器发送请求
        5.action里的链接是请求路径，表单最终提交给该链接里对应端口的软件
    -->
    <form action="https://www.baidu.com/save">
        <!--画一个提交按钮，这个按钮可以提交表单-->
        <!--画按钮可以使用input输入域，
            submit 表示该按钮是提交按钮
            button 是普通按钮，没有提交表单的能力
            text   text
            password密码
            checkbox复选
            radio  单选
        -->
        用户名: <input type="text"/>
        <input type="submit" value="BAIDU"/>
    </form>
    <br>
    <!--这个表单和超链接没区别 但是表单比超链接多的地方是可以携带数据-->
    <form action="http://www.luogu.com.cn/">
        <input type="text"/>
        <input type="submit" value="LUOGU"/>
    </form>
    <form action="https://baidu.com/user/login">
        用户名<input type="text"/><br>
        密码<input type="password"/><br>
        <input type="submit" value="登录"/>
    </form>
    
    <!--
        表单用什么方式提交数据？如下。
        ？开头，&切割，实现数据分段
        HTTP协议要求的。
        https://www.baidu.com/login?username=123&password=1、
        格式:action?name=value&name=value&name=value&name=value&···
        W3C规定的
        所以，input后面一定有name=""才行，不然不提交。 上面的就不能提交（看域名框）
        没写value的时候，给服务器提交的是空字符串。
        java代码得到的是 string a=""
    -->

    <form action="https://baidu.com/login">
        <table border="1px" width="60%">
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password"/></td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <!--submit 和 clear都必须放在form里才能起作用-->
                    <input type="submit" value="登录">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="清空"></td>
            </tr>
        </table>
    </form>

</html>

<!DOCTYPE html>
<html>
    <head>用户注册表单</head>
    <body>
        <!--
            用户名    text
            密码      password
            确认密码  password
            性别      radio
            兴趣爱好  text
            学历      select
            简介      textarea
        -->

        <!--
            method属性
            post：相关信息不会显示在地址栏
            get:  相关信息会显示在地址栏
            不指定时默认get
        -->

        <form action="http://www.baidu.com/register" method="post">
            用户名
            <input type="text" name="username">
            <br>
            密码  
            <input type="password" name="userpsw">
            <br>
            确认密码
            <input type="password">  
            <br>
            性别<!--多选一 name相同就行 value要提前写好（毕竟是要传服务器的嘛）checked 默认选中-->
            <input type="radio" name="usersex" value="1" checked>男
            <input type="radio" name="usersex" value="0">女
            <br>
            兴趣爱好
            <input type="checkbox"  name="interest" value="smoke">抽烟
            <input type="checkbox"  name="interest" value="drink">喝酒
            <input type="checkbox"  name="interest" value="dyeHair">烫头
            <br>
            学历
            <select name="grade">
                <option value="pripri" selected>小学肄业</option><!--默认选中-->
                <option value="pri">小学</option>
                <option value="mid">初中</option>
                <option value="hgh">高中</option>
                <option value="col">本科</option>
                <option value="mas">硕士</option>
                <option value="doc">博士</option>
                <option value="Adc">博士后</option>
            </select>
            <br>
            简介<!--文本域没有name-->
            <textarea name="intro" cols="80" rows="40">
            </textarea>
            <input type="submit" value="注册">
            <input type="reset" value="清空">
        </form>
    </body>
</html>
posted @ 2022-01-22 10:10  Jedi_Pz  阅读(87)  评论(0)    收藏  举报