一、input标签
<body> <input type="text" name="user"/> <br /> <input type="password" name="password"/> <br /> <br /> <input type="button" value="登入1" /> <input type="submit" value="登入2" /> </body> ''' type: text 文本输入框 password 密码输入框 button 按钮(需要配合js使用) subbmit 提交按钮 '''
显示如下:
二、form表单提交
上面的内容是无法提交的,虽然有提交按钮,但是没有提交到后台的地址,这里就需要使用form表单来提交了。
<body> <form action="http://localhost:8000" method="get"> <input type="text" name="user"/> <br /> <input type="password" name="password"/> <br /> <br /> <input type="button" value="登入1" /> <input type="submit" value="登入2" /> </form> </body> ''' 1. action: 指定要发送数据的后台url地址 2. method: 提交表单使用的方法,有POST和GET, 默认为GET方法 '''
注:
input标签中的内容要提交到后台,必须要有一个name属性,当点击submit按钮提交时,数据会被打包成一个字典的形式,{'user':'bigberg','password':'111111'},然后将这个数据提交到后台
form标签提交的内容只能是 input 和 select 标签的内容
POST和GET方法的区
GET | POST | |
---|---|---|
后退按钮/刷新 | 无害 | 数据会被重新提交(浏览器应该告知用户数据会被重新提交)。 |
书签 | 可收藏为书签 | 不可收藏为书签 |
缓存 | 能被缓存 | 不能缓存 |
编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。 |
历史 | 参数保留在浏览器历史中。 | 参数不会保存在浏览器历史中。 |
对数据长度的限制 | 是的。当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。 | 无限制。 |
对数据类型的限制 | 只允许 ASCII 字符。 | 没有限制。也允许二进制数据。 |
安全性 |
与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。 在发送密码或其他敏感信息时绝不要使用 GET ! |
POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。 |
可见性 | 数据在 URL 中对所有人都是可见的。 | 数据不会显示在 URL 中。 |
三、input表单类型和属性
3.1 文本框的默认值
<input type="text" name="user" value="哈士奇"/> <br /> <input type="password" name="password" value="hashiqi"/>
3.2 单选框radio
<body> <div> <p>性别</p> <span>男:</span><input type="radio"/> <span>女:</span><input type="radio"/> </div> <br /> <input type="submit" value="提交" /> </body>
显示如下:
我们可以添加name属性,并将name属性设置为一样,那么单选框就能保证只能选择一个了,如下:
<body> <div> <p>性别</p> <span>男:</span><input type="radio" name="gender"/> <span>女:</span><input type="radio" name="gender"/> </div> <br /> <input type="submit" value="提交" /> </body> ''' name属性设置一样,就能实现单选的功能 '''
显示如下:
上面的内容如果提交到后台,还是不能区分gender指的是男还是女,所以还是需要设置一个value值:
<body> <form> <div> <p>性别</p> <span>男:</span><input type="radio" name="gender" value="1"/> <span>女:</span><input type="radio" name="gender" value="2"/> </div> <br /> <input type="submit" value="提交" /> </form> </body> ''' 用value值来区分单选框选择的具体值 '''
设置默认值checked="checked":
<span>男:</span><input type="radio" name="gender" value="1" checked="checked"/> <span>女:</span><input type="radio" name="gender" value="2"/> ''' checked="checked" 设置默认 '''
3.3 多选框checkbox
<body> <form> <div> <p>爱好</p> <span>足球</span> <input type="checkbox" name="favor" value="1"> <span>蓝球</span> <input type="checkbox" name="favor" value="2"> <span>棒球</span> <input type="checkbox" name="favor" value="3"> <span>网球</span> <input type="checkbox" name="favor" value="4"> </div> <input type="submit" value="提交"> </form> </body> ''' 同样以value的值来确定不同的选项 同样可以使用 checked="checked" 来设置默认值 '''
3.4 文件上传file
<body> <form enctype="multipart/form-data"> <div> <p>上传文件</p> <input type="file" /> </div> <input type="submit" value="提交"> </form> </body> ''' file 提交文件:form表单需要加上属性enctype="multipart/form-data" 上传文件注意两点: 1 请求方式必须是post 2 enctype="multipart/form-data" '''
3.5 重置reset
<body> <form> <div> <input type="text" name="user"/> <br /> <input type="password" name="password"/> </div> <input type="submit" value="提交"> <input type="reset" value="重置"/> </form> </body> ''' 重置按钮可以将输入的信息清空 '''