码迷,mamicode.com
首页 > Web开发 > 详细

HTML表单(一)

时间:2018-11-05 11:13:43      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:维护   hand   jsp   onclick   实现   submit   内容   reset   script   

*********************表单和表单域******************************

一.什么是表单


收集用户信息的一个容器,相当于点餐时的菜单...


表单中包含表单域(文本框、密码框、按钮 都属于表单域)


定义表单的语法:


<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表单(一)

标签:维护   hand   jsp   onclick   实现   submit   内容   reset   script   

原文地址:https://www.cnblogs.com/MrTanJunCai/p/9907532.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!