HTML06(重点三):表单form

(011)—表单form

  • form标签,action属性填地址;
  • input按钮,name必须提交,value填,不做要求。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单form</title>
</head>
<body>
<!---
    1.表单有什么用?
      收集用户信息。
      表单展现之后,用户填写表单,点击提交按钮提交数据。
    2.怎么画一个表单?
       使用form标签画表单。
    3.一个网页当中可以有多个表单form。
    4.表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址;
         action属性用来指定数据提交给哪个服务器。
         action属性和超链接中的href属性一样,都可以向服务器发送请求(request)
    5.http://192.168.111.3:8080/oa/save这是请求路径,表单提交数据最终提交给:
         192.168.111.3机器上的8080端口对应的软件

         action 是写URL.
-->
<form action="http://www.baidu.com">
    <!--
        1.画一个提交按钮,这个按钮可以提交表单
        2.画按钮可以使用input输入域,type="submit"的时候该按钮是一个提交按钮,具有提交表单的能力。
        3.对于按钮来说,按钮的value属性用来指定按钮上显示的文本信息。
    -->
    <input type="submit" value="百度"/><br>
    用户名<input type="text"><br>
    密码<input type="text">
    <hr color="red">
    <!--这是一个普通按钮,不具备提交表单的能力。-->
    <input type="button" value="设置按钮上显示的文本"/>
</form>

<!--
    表单是以什么格式提交数据给服务器的?
        http://localhost:8080/jd/login?username=abc&userpwd=111
        格式:action?name=value&name=value&name=value&name=value...
        w3c的HTTP协议规定的,必须以这种格式提交给服务器。
    重点强调:表单项写了name属性的,一律提交给服务器,不想提交这一项,就不要写name属性。
    文本框和密码框的value不需要程序员指定,用户输入什么value就是什么。

    当name没有写的时候,该项不会提交给服务器。
    但是当value没有写的时候,value的默认值是“空字符串”,会将空字符串提交给服务器。JAVA代码得到的是:String username="";
-->
<form action="http://localhost:8080/jd/login">
    <table border="1px">
        <tr>
            <th>用户名</th>
            <td><input type="text" name="username"/></td>
        </tr>
        <tr>
            <th>密码</th>
            <td><input type="password" name="userpwd"/></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="登录"/>
                <input type="reset" value="清空"/>
            </td>
        </tr>
    </table>
</form>
    <hr color="red">
    <!--submit,reset等都必须放到form标签内部,否则不起作用-->
    <input type="submit" value="登录"/>
    <input type="reset" value="清空"/>
</body>
</html>

结果:
在这里插入图片描述


(012)用户注册的表单

  • 地址栏:post隐藏,默认采取get显示。
  • 超链接都是get请求,提交的数据都是固定不变。
  • 表单和超链接,浏览器提交给服务器的数据格式:name=value&name=value&name=value&…
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册的表单</title>
</head>
<body>
    <!---
        用户注册:用户名、密码、确认密码、性别、兴趣爱好、学历、简介

        form表单method属性:缺省默认为get
           1. get:采用get方式提交的时候,用户提交的信息会显示在浏览器的地址栏上。
           2. post:采用post方式提交的时候,用户提交的信息不会显示在浏览器的地址栏上。
           3. 当用户提交的信息中含有敏感信息:如,密码,建议采用post方式提交。
           4.post提交的时候提交的数据格式和get还是一样的,只不过不在地址栏上显示出来,
           post提交的数据还是:name=value&name=value&name=value&...
    -->
    <form action="http://localhost:8080/jd/register" method="post">
        用户名
        <input type="text" name="username"/> <br>
        密码
        <input type="password" name="userpwd"/><br>
        确认密码
        <input type="password"/><br>
        性别
        <input type="radio" name="gender" value="1"/><input type="radio" name="gender" value="0" checked/><!-单选按钮的value必须手动指定,checked默认选女->
        <br>
        兴趣爱好
        <input type="checkbox" name="interest" value="smoke"/>抽烟
        <input type="checkbox" name="interest" value="drink" checked/>喝酒
        <input type="checkbox" name="interest" value="firehair" checked/>烫头
        <br>
        学历
        <select name="grade">
            <option value="gz">高中</option>
            <option value="dz"/>大专
            <option value="bk" selected/>本科
            <option value="ss" selected/>硕士
        </select>
        <br>
        简介<!--文本域,文本域没有value属性,用户写的内容就是value-->
        <textarea rows="10" cols="60" name="introduction"></textarea>
        <br>
        <input type="submit" value="注册"/>
        <input type="submit" value="清空"/>
    </form>

    <!--
        超链接也可以提交数据给服务器,但是提交的数据都是固定不变的。
        超链接都是get请求,不是post请求。
    -->
    <a href="http://localhost:8080/jd/register?username=zhangsan&password=111">提交</a>
</body>
</html>
<!--
    表单提交给服务器的数据:name=value&name=value&name=value...
    http://localhost:8080/jd/register?username=Jack&userpwd=123&gender=1&interest=smoke&grade=ss&introduction=%E6%88%91%E6%98%AF%E4%B8%80%E4%B8%AA%E7%A8%8B%E5%BA%8F%E5%91%98
->

结果:
在这里插入图片描述

发布了42 篇原创文章 · 获赞 8 · 访问量 2434

猜你喜欢

转载自blog.csdn.net/JH39456194/article/details/103407691