用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - html代码库

form标签演示

2014-08-04 作者: jun举报

[html]代码库

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form标签演示</title>
  </head>
  <body>
     <!--
         
        form标签主要用于和后台进行数据的交互。
            input用于接受用户输入的数据个
            Input标签中的有type属性主要用于设置输入项的具体的类型
            text:代表文本框
            password:输入的密码框
             
        当真正要把数据使用form表单提交到服务端的时候,需要在form表单中书写响应的属性:
        action:这个属性主要用于告诉form表单把数据提交到什么地方去。
        method:它给是的用什么方式把数据提交的服务端
            提交方式本有7种,现在最常用的只有2种,get和post
            如果在form标签中不书写method属性值,默认是get方式在提交数据
             
             
            get和post提交的区别:
            1、提交数据的位置不同:
                get方式把数据会放在地址显示出来一起提交
                post方式会把数据放在请求的正文中
            2、敏感信息的保护:
                get会把敏感信息暴漏出来的
                post看不见敏感信息
            3、提交的数据大小不同:
                get提交的数据量非常的小。
                post提交的数据量没有严格限制。
             
        当需要把数据提交到服务端,在form表单中的其他子标签中所有的标签必须定义name属性,
        只有通过这个name属性才能把数据提交到服务端
         
         
         
         
         
        post提交数据的形式:
        POST / HTTP/1.1
        Accept: application/x-shockwave-flash, image/gif, image/jpeg, image/pjpeg, application/xaml+xml, application/vnd.ms-xpsdocument, application/x-ms-xbap, application/x-ms-application, */*
        Accept-Language: zh-cn
        User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
        Content-Type: application/x-www-form-urlencoded
        Accept-Encoding: gzip, deflate
        Host: 192.168.1.250:9090
        Content-Length: 266
        Connection: Keep-Alive
        Cache-Control: no-cache
         
        user=123&pwd=123&repwd=123&hobby=java&hobby=html&hobby=css&sex=nan&country=US&desc=%09++%09%09%09%C7%EB%D4%DA%D5%E2%C0%EF%CA%E4%C8%EB%B8%F6%C8%CB%B5%C4%C3%E8%CA%F6%D0%C5%CF%A2%0D%0A%09++%09%09&hidden=%D5%E2%C0%EF%B5%C4%D6%B5%B2%BB%BB%E1%D4%DA%D2%B3%C3%E6%CF%D4%CA%BE
         
         
        get方式提交的数据:
         
        GET /?user=123&pwd=123&repwd=123&hobby=java&hobby=js&sex=nan&country=---%D1%A1%D4%F1%B9%FA%BC%D2---&desc=%09++%09%09%09%C7%EB%D4%DA%D5%E2%C0%EF%CA%E4%C8%EB%B8%F6%C8%CB%B5%C4%C3%E8%CA%F6%D0%C5%CF%A2%0D%0A%09++%09%09&hidden=%D5%E2%C0%EF%B5%C4%D6%B5%B2%BB%BB%E1%D4%DA%D2%B3%C3%E6%CF%D4%CA%BE HTTP/1.1
        Accept: application/x-shockwave-flash, image/gif, image/jpeg, image/pjpeg, application/xaml+xml, application/vnd.ms-xpsdocument, application/x-ms-xbap, application/x-ms-application, */*
        Accept-Language: zh-cn
        User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
        Accept-Encoding: gzip, deflate
        Host: 192.168.1.250:9090
        Connection: Keep-Alive
         
             
      -->
      <form action="http://192.168.1.250:9090" method="get">
        用户名称:<input type="text" name="user"/><br /> 
        用户密码:<input type="password" name="pwd"/><br /> 
        确认密码:<input type="password" name="repwd"/><br /> 
         
        <!-- 兴趣爱好需要把它们的name属性定义成一样的,表示它们一组数据 -->
        兴趣爱好:<input type="checkbox" name="hobby" value="java"/>Java
              <input type="checkbox" name="hobby" value="html"/>Html
              <input type="checkbox" name="hobby" value="css"/>CSS
              <input type="checkbox" name="hobby" value="js"/>JavaScript<br />
               
        <!-- 在选择男女的时候,一定要把男女也定在一组中,不然会出现男女同时被选择 -->    
        选择性别:<input type="radio" name="sex" value="nan" checked="checked"/>男
              <input type="radio" name="sex" value="nv" checked="checked"/>女<br />
               
        上传靓照:<input type="file" /><br />
       
        选择国家:
            <select name="country"> <!-- 下拉框 -->
                <option>---选择国家---</option>
                <option value="CN">中国</option>
                <option value="US">美国</option>
                <option value="EN">英国</option>
            </select><br />
        个人描述:
            <textarea rows="4" cols="30" name="desc">
                请在这里输入个人的描述信息
            </textarea><br />
        隐藏区域:
            <input type="hidden" name="hidden" value="这里的值不会在页面显示"/><br />
         
        <input type="button" value="按钮" /><br />
        <input type="submit"  value="提交"/>
        <input type="reset"  value="重置"/>
         
         
         
      </form>
  
  </body>
</html>


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...