Html提交表单制作
笔记整理
1. 代码
<!-- 知识总结:提交表单中form必须有action属性,表示提交地址所有提交的数据,input必须具有name属性,才能把数据提交到指定地址input按钮的文字,使用value表示属性input必须放在form标签内才能提交
-->
<!-- input标签常见类型总结:type="text" 文本输入框type="password" 密码输入框type="radio" 单选框type="checkbox" 复选框type="button" 普通按钮type="submit" 提交按钮type="reset" 重置按钮type="file" 文本选择框
-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="https://www.bilibili.com/" ><!--表示提交地址--><table width="600px" border="1px" cellspacing="0"><tbody><tr height="40px"><td rowspan="4" align="center">总体信息</td><td colspan="2"></td></tr><tr height="40px"><!--name="loginnname":用于把信息提交给指定地址--><td align="right">用户名:</td><td><input type="text" name="loginname"></td></tr><tr height="40px"><td align="right">密码:</td><td><!--name="loginnname":用于把信息提交给指定地址--><input type="password" name="loginname"></td></tr><tr><td colspan="2" align="center"><!--设置提交和充值按钮--><input type="submit" value="提交"><input type="reset" value="重置"></td></tr></tbody></table></form> </body>
</html>
2. 效果展示
3. 补充
<!--补充请求服务器的方式:get:获取数据post:提交数据例如:<form method="get"><form method="post">-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!--post提交请求时,提交的信息内容不会出现在地址栏上--><!--get请求提交数据时,提交的信息内容会出现在地址栏上--><form action="http://www.bilibili.com" method="post"><p><input type="text" name="login"></p><p><input type="password" name="pass"></p><p><input type="submit"></p></form></body></html>
- 使用get进行提交时,提交效果:
- 使用post进行提交时,提交效果: