HTML表单和表单域

一、什么是表单？

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

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

定义表单的语法：

<form>

表单域

</form>

常用的属性

1.action

用来处理请求的页面或程序（通常是JSP页面或Servlet 相当于厨师）

点击提交按钮以后，请求提交到handleForm.html页面来处理

</form>

2.method

默认是get提交

</form>

提交方式

常见的提交方式有两种

（1）get请求

（2）post请求

get和post的区别：

区别1：get请求的参数会暴露在浏览器的地址栏中，不安全，post请求的参数不会显示在地址栏中，相对安全。

例：地址栏中显示 www.handleForm.html?username=aaa&password=123

get 纸质菜单

post 点餐机

区别2：get请求的参数长度有限制（通常和浏览器相关）

post请求的参数理论上长度无限制

二、表单域

需求：实现用户登录页面

1）文本框

type 表示表单域的类型，默认值是text表示文本框

name 给表单域起一个名字，取对应的表单域中的内容

value 真正传递到服务器的值

属性maxlength="6"表示最多输入6个字符，中英文都是6个

属性size=“30”可以改变文本框的大小，但是尽量不要这样写，通过javascript控制文本框的大小

2）密码框

3)按钮

①提交按钮，submit，点击提交按钮，会提交请求

②重置按钮，reset，点击重置按钮，会把表单域中的值恢复到默认状态

③图片按钮，image，功能类似于提交按钮，点击图片按钮以后也会提交表单

④普通按钮，不能提交表单，可以绑定事件

不推荐直接在按钮代码上，直接绑定事件，不符合W3C规范

W3C规范：内容、表现、行为三者分离

内容、表现、行为三者分离，如果三者没有分离，代码糅杂在一起，比较乱，不好维护

为了体现代码的可维护

（1）内容

html标签和文字

（2）表现

CSS样式

（3）行为

JavaScript代码控制的

4）隐藏域

隐藏域 name是服务器端用来取值的标识名，value表示传递的内容

例：银行卡提交时的安全码，不该让客户看到

5）单选框 radio

checked="checked"表示默认选中，如果有多个选项被赋值该属性，那么同组中只有最后一个被默认选中。

6）复选框 checkbox

可以选择多个值默认选中

7)下拉列表框 <select><option></option></select>

<form action="a.jsp" method ="post">

现居住城市：
<select name="city" size="2" multiple="mutiple">
<option value="beijing">北京</option>
<option value="tianjin" selected="selected">天津</option>
<option value="shanghai" selected="selected">上海</option>
<option value="guangzhou">广州</option>
<option value="other">其它</option>
</select>
</form>

size="2"表示一次性显示两个

style="vertical-align:top;"可以改变字体位置、对齐方式。

style="属性1：值1；属性2，值2.。。。"

8）多行文本域 textarea

col=""控制列数，row=""控制行数，readonly="readonly"设置为只读，不可编辑

①<form action="a.jsp" method ="post">
文本域：<textarea name="content" id="2" cols="30" rows="10" style="vertical-align:top" readonly="readonly">

</textarea>
</form>

②<form action="handlerForm.jsp" method="post">
<h2>用户协议</h2>
<textarea name="content" rows="8" cols="60" readonly="readonly">
欢迎阅读XX电子商城用户协议，请仔细阅读如下内容：
...
</textarea><br/><br/>
同意以上协议<input type="checkbox" name="agree"/>

<input type="submit" value="注册" disabled="disabled"/>
</form>

9）文件域 file

<form action="a.jsp" method ="post">
请选择上传的照片：<input type="file" name="photo"/>
</form>

附：演示用户注册


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
	<head>
	<title>演示用户注册</title>


	<meta http-equiv="content-type" content="text/html; charset=UTF-8">



	</head>

	<body>


	<fieldset style="width:700px;">
	<legend>用户注册</legend>
	<form action="#" method="post">
	<label for="username">用户名</label><input type="text" name="username" id="username"/><br/>
	密码<input type="password" name="password1"/><br/>
	确认密码<input type="password" name="password2"/><br/>
	性别:
	男<input type="radio" name="sex" value="male" checked="checked"/>
	女<input type="radio" name="sex" value="female"/><br/>
	婚姻状态:
	未婚<input type="radio" name="marryState" value="single" checked="checked"/>
	已婚<input type="radio" name="marryState" value="married"/>
	离异<input type="radio" name="marryState" value="divorce"/><br/>
	请选择您的爱好:
	足球:<input type="checkbox" name="hobby" value="football" checked="checked"/>
	篮球:<input type="checkbox" name="hobby" value="basketball" checked="checked"/>
	羽毛球:<input type="checkbox" name="hobby" value="badminton"/><br/>
	请选择您所在城市
	<select name="city" multiple="multiple" size="3" style="vertical-align:top;">
	<option value="beijing">北京</option>
	<option value="shanghai">上海</option>
	<option value="guangzhou">广州</option>
	<option value="shenzhen">深圳</option>
	<option value="jinan">济南</option>
	</select><br/>
	用户协议<textarea rows="8" cols="80" style="vertical-align:top;" readonly="readonly">
	XXXX电子商城用户协议,请仔细阅读....
	</textarea><br/>
	同意该协议
	<input type="checkbox" name="agree"/><br/>
	请选择需要上传的照片<input type="file" name="photo"/>
	<input type="button" value="注册" disabled="disabled"/>

	<!-- 九.隐藏域 -->
	<input type="hidden" name="safeCode" value="12345"/>
	</form>
	</fieldset>

	</body>
	</html>

表单域组标签：

HTML表单和表单域相关推荐

前端：HTML/06/表单，表单元素（单行文本域，单行密码域，单选按钮，复选框，下拉列表，文本区域，上传文件域，各种按钮，隐藏域，lt;caption表格标题）
表单<form>(块元素) 表单的概念:表单主要用来获取用户数据(信息),如:注册表单, 查询表单,登录表单. 表单的工作原理: 浏览有表单的网页,填写一些必要的信息,然后点击某个按钮进行 ...
ajax提交表单跨域啊,form表单提交没有跨域问题，但ajax提交存在跨域问题
浏览器的策略本质是:一个域名下面的JS,没有经过允许是不能读取另外一个域名的内容,但是浏览器不阻止你向另外一个域名发送请求. 所以form表单提交没有跨域问题,提交form表单到另外一个域名,原来页面 ...
autojs遍历当前页面所有控件_HTML5表单和表单控件的使用
哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! 志同道合的小伙伴跟我一起学习交流哦! 第一阶段 HT ...
access表怎么生成表结构_数据结构——单链表讲解
单链表单链表的创建分为头插入法和尾插入法两种,两者并无本质上的不同,都是利用指针指向下一个结点元素的方式进行逐个创建,只不过使用头插入法最终得到的结果是逆序的. 1.单链表概念&设计单链表 ...
物理机存放mysql实例原则_MySQL优化笔记（四）--表的设计与优化（单表、多表）...
前面讲了SQL优化以及索引的使用.设计优化了,那么接下来就到表的设计与优化啦!!!真实地去设计优化单表结构以及讲述多表设计基本原则(结合真实的生产环境的取舍来讲述). 文章结构:(1)单表设计与优化: ...
html表单自动提交表单提交表单数据类型,表单
表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框. ...
分步表单_表单设计-掌握表单设计方法（表单体验篇）
全篇阅读大概需要15min,对表单设计不熟悉的同学看完后肯定会有不少的收获~~~ 说到表单其实在生活中可以接触到各种各样的表单,比如:驾照申请表.体检表.银行开户需要填写的表等等,这些都是表单,主要目 ...
第三章表单与表单元素
学习目标理解表单的作用理解表单与表单元素的关系掌握表单标签及其属性掌握各种表单元素标签及其属性在Web网页中,浏览者经常需要与Web服务器进行数据交互.当浏览者需要填写数据并将这些数据发送到 ...
数据结构——线性表：顺序表、单链表、双链表（C++）
内容概要: 1.代码部分: 线性表抽象类顺序表类单链表类双链表类主函数 2.基本概念及注意事项代码(测试环境VS2017): //线性表ADT类的定义:ADT_List.htemplate ...

HTML表单和表单域

HTML表单和表单域相关推荐

最新文章

热门文章

HTML表单 和 表单域

HTML表单 和 表单域相关推荐

最新文章

热门文章

HTML表单和表单域

HTML表单和表单域相关推荐