html-表单标签

  表单标签
    * 可以提交数据到**网站上的服务器,这个过程可以使用表单标签实现
    * <form></form>:定义一个表单的范围
    - 属性
      ** action:提交到地址,默认提交到当前页面
      ** method: 表单提交方式
    - 常用的有两种:get和post,默认是get请求

    ** get和post区别
    1、get请求地址栏会携带提交的数据,post不会携带(请求体里面,后面http协议的时候再详解)
    2、get请求安全级别较低,post较高
    3、get请求数据有大小的限制,post没有限制。


    ** enctype:一般请求不需要用到这个属性,做文件上传时候需要设置这个属性。

    ** 输入项:可以输入内容或者选择内容的部分
      - 大部分的输入项 使用 <input type="输入项的类型"/>

        *********** 在输入项里面要有一个name属性,为了用数据库保存数据 **********

      *** 普通输入项: <input type="text"/>

      *** 密码输入项: <input type="password"/>

      *** 单选输入项: <input type="radio"/>
        - 在里面需要属性 name
        - name的属性值必须要相同
        - 必须有一个value值

        **** 实现默认选中的属性
          -- checked="checked"

      *** 复选输入项: <input type="checkbox"/>
        - 在里面需要属性 name
        - name的属性值必须要相同
        - 必须有一个value值

        **** 实现默认选中的属性
          -- checked="checked"

      *** 文件输入项:(上传时候用到)
        <input type="file"/>

      *** 隐藏项:
        <input type="hidden"/>

      *** 下拉输入项(不是在input标签里面)
        <select name="birthday">
          <option value="0">请选择</option>
          <option value="1995">1995</option>
          <option value="1996">1996</option>
          <option value="1997">1997</option>
        </select>
        **** 默认选中
          selected="selected"

      *** 文本域:
        <textarea cols="10" row="5"></textarea>

    *** 提交按钮:
       <input type="sumbit"/>
       <input type="sumbit" value="注册"/>

       当在输入项里面写了name属性之后
         file:///D:/Java/JavaWeb/day01/09-表单标签1.html?phone=15872586170&pwd=wyj0320.cn&sex=male&love=y&love=p&f=&birthday=1997&txt=love&hid=

         ** ?输入项name的值-输入的值&
         ** 参数类似于Map集合里面的key-value

     *** 使用图片提交
       <input type="image" src="图片路径"/>

     *** 重置按钮:回到输入项的初的状态
       <input type="reset"/>

     *** 普通按钮(js里面用到)
       <input type="button" value="普通按钮"/>

  完整代码:

<html>
    <head>
        <title>World</title>
    </head>
    <body>
    <!-- 测试表单 -->
        <form action="01-hello.html" method="post">
            手机号码:<input type="text" name="phone"/><br/>
            创建密码:<input type="password" name="pwd"/><br/>
            性别:<input type="radio" name="sex" value="female"/><input type="radio" name="sex" value="male" checked="checked"/><br/>
            爱好:<input type="checkbox" name="love" value="y"/>羽毛球 <input type="checkbox" name="love" value="p" checked="checked"/>乒乓球 <input type="checkbox" name="love" value="z"/>足球
            <br/>
            文件:<input type="file" name="f"/><br/>
            生日:<select name="birthday">
                    <option value="0">请选择</option>
                    <option value="1995">1995</option>
                    <option value="1996">1996</option>
                    <option value="1997"  selected="selected">1997</option>

                  </select>
                  <br/>
            自我描述:<textarea cols="10" rows="5" name="txt"></textarea>
            <br/>
            隐藏项:<input type="hidden" name="hid"/> <br/>
            <input type="submit" value="注册"/>
            <br/>
            <!--<input type="image" src="images/a.jpg"> -->
            <input  type="reset"/>
            <br/>
            <input type="button" value="普通按钮"/>
        </form>
    </body>
</html>

 

posted @ 2018-10-31 13:03  栗子壳  阅读(318)  评论(0编辑  收藏  举报