HTML-form表单-input按钮type-textarea文本域-maxlength文本框最大输入字符数量-下拉选择select

45、<!--超链接和表单都可以向服务器发送请求,表单发送请求的同时可以携带数据-->

      <form action="http://www.baidu.com">

         <input type="text">

         <input type="submit" name="百度" value="百度">

     </form>

46、form标签的属性:action=""  ; 用来指定服务器地址发送请求:request

47、表单项写了name属性的,一定会提交给服务器; 没有name 表单不会提交数据给服务器

48、 HTTP协议规定,必须以这种格式提交给服务器

49、input的按钮 type 属性:

---->提交按钮:  type="submit"  提交按钮,具有提交表单的能力

---->普通按钮: type="button" 

---->文本框   : type="text"   文本框不需要value 用户些什么就是什么

---->密码框   : type="password"  密码框不需要value 用户些什么就是什么

---->复选框   : type="checkbox" 

---->单选按钮: type="radio"    

---->重置清空 :type="reset"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单form</title>
    </head>
    <body>
        <a href="http://www.baidu.com">百度</a>
        <!--超链接和表单都可以向服务器发送请求,表单发送请求的同时可以携带数据-->
        <form action="http://www.baidu.com">
            <input type="text">
            <input type="submit" name="百度" value="百度">
        </form>
        
        <br><br><br><br><br>
        <form action="http://localhost:8080/jb/login">
           <table >
               
            <tr>
            <td>用户名</td>  <td><input type="text" name="username" />  </td>
            </tr>
            
            <tr>
            <td>密码</td>  <td><input type="password" name="userpassword" />  </td>
            </tr>

            <tr align="center">
                <!--合并单元格-->
                <td colspan="2">
                    <!--submit reset 放到表单内部-->
                    <input type="submit"  value="登录" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="清空" />
                </td>    
            </tr> 
          </table>
        </form>

</body> </html>

maxlength 设置文本框中可输入的字符数量<input type="text" maxlength="3"/>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>016-input空间的maxlength属性</title>
    </head>
    <body>
        <!--maxlength 设置文本框中可输入的字符数量-->
        <input type="text" maxlength="3"/>
        
    </body>
</html>

50、textarea 文本域  没有value属性;用户填写内容就是value

<textarea name="" id="" cols="30" rows="10"></textarea>

51、form表单method属性:method

 method="post" 属性会让用户的敏感信息隐藏在浏览器地址栏:例如:密码

 method="get" 表单的属性会让用户的敏感信息显示在浏览器的地址栏

超链接:是get请求,不是post请求;超链接里面也可以提交数据,但是只能提交一次;需要指定不指定会默认get

form提交数据,用户填写的信息就是提交的数据,可选择

52、下拉选择 :<select name="garden" ></select>

用户注册: 用户名  姓名 密码 确认密码 性别 兴趣爱好 学历 简介(textarea)

form表单method属性:

method="post" 属性会让用户的敏感信息隐藏在浏览器地址栏;

密码 method="get"表单的属性会让用户的敏感信息显示在浏览器的地址栏 method 需要指定不指定会默认get

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户表单注册</title>
    </head>
    <body>
        
        <form action="http://localhost:8080/jd/register" method="post">
            
            用户名
            <input type="text" name="username" id="" value="" />
            <br>
            密码  
            <input type="password" name="userpassword" />
            <br>
            确认密码
            <input type="password"  />
            <br>
            性别
            <!--单选按钮的value必须手动指定-->
            <!--想要某一个选项默认选中需要在对应的选项之后加一个checked-->
            <input type="radio" name="gender" value="1" checked/><input type="radio" name="gender" value="0"/><br>
            兴趣爱好
            <input type="checkbox" name="interest"value="somke" />抽烟
            <input type="checkbox" name="interest"value="dink" checked/>喝酒
            <input type="checkbox" name="interest"value="fireHair" />烫头
            <br>
            学历
            <!--selected 表示默认 是一个下拉列表-->
            <select name="graden">
                <option value ="gz">高中</option>
                <option value ="dz">大专</option>
                <option value ="bk" selected>本科</option>
                <option value ="ss">硕士</option>
            </select>
            <br>
            简介
            <!--textarea 文本域     没有value属性;用户填写内容就是value-->
            <textarea rows="19" cols="90" name="简介"></textarea>
            
            <br>
            <input type="submit" value="注册" />
            <input type="reset"  value="清空" />
        </form>
            
    </body>
</html>
posted @ 2022-06-12 12:28  280887072  阅读(342)  评论(0编辑  收藏  举报