*********************表单和表单域******************************
一.什么是表单
收集用户信息的一个容器,相当于点餐时的菜单...
表单中包含表单域(文本框、密码框、按钮 都属于表单域)
定义表单的语法:
<form>
表单域
</form>
常用的属性
1. action
用来处理请求的页面或程序(通常是JSP页面或Servlet 相当于厨师)
点击提交按钮以后,请求提交到handleForm.html页面来处理
<form action="handleForm.html">
</form>
2. method
默认是get提交
<form action="handleForm.html" method="post">
</form>
提交方式
常见的提交方式有两种
(1)get ?请求
(2) post 请求
***********************get和post的区别**************************************
区别1: ?get 请求的参数会暴露在浏览器的地址栏中,不安全.post请求的参数不会
显示到地址栏中,相对安全
handleForm.html?username=aaa&password=123
get ?纸质菜单
post 点餐机
区别2: get 请求参数的长度有限制的(通常和浏览器相关)
??????post 请求的参数 理论上 长度无限制
**********************************表单域**************************************
需求:实现用户登录页面
一.文本框
<input type="text" name="username" value=""/>
type 表示表单域的类型 ?默认值是text 表示文本框
name 给表单域起一个名字,服务器通过这个名字 取对应的表单域中的内容
value ?真正传递到服务器上的值
二.密码框
password
三.按钮
1.提交按钮 submit
点击提交按钮以后 会提交请求
2.重置按钮
reset
点击重置按钮以后,会把表单域中的值 恢复到默认状态
3. 图片按钮
image ?功能类似于提交按钮 点击图片按钮以后 也会提交表单
<input type="image" src="../img/login.gif"/>
4.普通按钮
不能提交表单,绑定事件
<input type="button" value="普通按钮" onclick="alert(‘我被点击了‘)"/>
不推荐直接在按钮代码上 直接绑定事件,不符合W3C规范
演示代码:
<body>
???<h2>用户登录</h2>
???<form action="handleForm.html" method="post">
???用户名<input type="text" name="username" value="请输入用户名"/><br/>
???密码<input type="password" name="password1" value="请输入密码"/><br/>
???
???<input type="submit" value="登录"/>
???<input type="reset" value="重置"/>
???<input type="image" src="../img/login.gif"/>
???
???<input type="button" value="普通按钮" onclick="alert(‘我被点击了‘)"/>
???</form>
?</body>
********************************规范:内容、表现、行为三者分离*****************************************
内容、表现、行为三者分离,如果三者没有分离 代码糅杂在一起,比较乱 不好维护
体现可维护、可读性
(1)内容
html标签和文字
(2)表现
CSS样式
(3)行为
JavaScript代码控制的
HTML表单（一）
原文地址：https://www.cnblogs.com/MrTanJunCai/p/9907532.html