ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML-form表单按钮type-textarea文本域-下拉选择select

2022-06-12 12:33:34  阅读:155  来源: 互联网

标签:form textarea 表单 ---- HTML 提交 type method 属性


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>

 

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>

标签:form,textarea,表单,----,HTML,提交,type,method,属性
来源: https://www.cnblogs.com/lwt280887072/p/16367746.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有