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="data:images/a.jpg"> -->

            <input  type="reset"/>

            <br/>

            <input type="button" value="普通按钮"/>

        </form>

    </body>

</html>