四表单常用控件
表单的使用非常广泛,例如搜索框,登录注册页面等等
常用表单控件代码如下:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>3-1表单的基本元素</title> </head> <body> <!-- 表单元素使用form标签包裹 --> <form action="do.php"> <!-- 1.输入框 --> <!-- name属性用于提交到后端编程语言处理 --> 姓名:<input type="text" name="name" value=""><br> <!-- 2.密码框 --> 密码:<input type="password" name="password" value=""><br> <!-- 3.单选框 不管有多少单选框,name属性的值必须一致 --> 性别:<input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 <!-- 默认设置性别为保密 --> <!-- checked是bool属性:真true 假false,要么不赋值,要么把自己赋值给自己 下方三种方式均可--> <!-- <input type="radio" name="sex" value="secret" checked="">保密<br> --> <!-- <input type="radio" name="sex" value="secret" checked>保密<br> --> <input type="radio" name="sex" value="secret" checked="checked">保密<br> <!-- 4.复选框,name值必须是一个数组--> 爱好:<input type="checkbox" name="hobby[]" value="movie">看电影 <!-- 将打游戏设置为默认选项 --> <input type="checkbox" name="hobby[]" value="game" checked>打游戏 <input type="checkbox" name="hobby[]" value="cook">做饭 <input type="checkbox" name="hobby[]" value="wash">洗衣 <br> <!-- 5.下拉框 --> 级别:<select name="level" > <option value="xiaobai">小白</option> <!-- 默认选中第一个,这里将菜鸟设置为默认项 --> <option value="cainiao" selected>菜鸟</option> <option value="zhongji">中级</option> <option value="dashen">大神</option> </select> <br> <!-- 6.文件--> <!-- accept 可接受的文件类型,可写作 image/jpg,image/png,image/gif *代表可以接受所有图片类型 --> 头像:<input type="file" name="photo" accept="image/*"> <br> <!-- 7.文本域--> <!-- 文本域是一个多行多列的文本框,如果想禁止拖拽文本域拖动可以使用css的resize: none--> 备注:<textarea name="comment" rows="5" cols="30"></textarea> <br> <!-- 8.提交按钮 --> <!-- 提交后会交给form 中action中指定的文件进行处理 --> <input type="submit" name="submit" value="提交"> </form> </body> </html>
执行:
点击提交,可以看到提交的信息都通过url发送给了do.php,当前不存在do.php所以报404错误
这种提交方式是get提交,所有信息明文显示在url地址中
说明:
提交方式有很多,最主要的有二种:
1.get方式:这也是默认的方式,用户提交的表单数据全部在url地址上
优点是便于收藏和重复调用,缺点是不安全并且数据数量受限制
2.post方式:数据通过请求头来提交,url地址栏看不到,非常安全,且长度不受限制
get方式非常适合传递不敏感且长度很短的数据
post方式非常适合传递重要数据且长度不确定的数据
将提交方式改为post
此时再提交就是通过post方式,而不再是get明文的方式
如果想要查看提交的信息,可以查看请求头,需要在do.php文件存在的情况下才能查看,后面再讲
本文作者为BUG之神,转载请注明。