在学习Java EE的过程中会涉及到一些html的知识,在这里呢Peter xiao结合网上的相关资源,对于html中的form表单做了一些总结(主要是老师上课时提到了这一部分,就顺便了解了一波~)
1. form表单简介
在html中,表单是经常用到的,用来与用户交互并提交数据。在 Web 网页中,表单用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能,例如,用户进行注册和登录页面就是用表单实现的。
2. 标签的语法格式
<form action="提交地址" method="提交方式">表单内容</form>
其中,表单的内容可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等标签
3. 表单元素
一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。其中表单标签是指<form>标签本身,它是一个包含表单元素的区域,使用<form></form>定义;表单域是<form>标签中用来收集用户输入的每一项,通常用input标签来定义,input标签有不同的类型,对应用户不同的数据;而表单按钮用来提交<form>表单中的所有信息到服务器。
4. <form>标签属性
accept 服务器接收到的文件的类型 accept-charset 服务器可处理的表单数据字符集 action 当提交表单时向何处发送表单数据 autocomplete 是否启用表单的自动完成功能,值可以是:on、off,html5新增 enctype 在向服务器发送表单数据之前如何对其进行编码,method="post"时可以使用,值可以是:multipart/form-data、text/plain等 method 用于发送表单数据的HTTP方法,值可以是:get、post name 规定表单的名称,在xhtml中也废弃,使用id来代替 novalidate 提交表单时不进行验证,值为:novalidate,html5新增 target 在何处打开action属性中的地址,值可以是:_blank、_self、_parent、_top 5. 运行示例
1)带有两个输入字段和一个提交按钮的 HTML 表单:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>运行示例1</title> </head> <body> <form action="demo-form.php"> 名: <input type="text" name="FirstName" value="aaa"><br> 姓: <input type="text" name="LastName" value="bbb"><br> <input type="submit" value="提交"> </form> <p>点击"提交"按钮,表单数据将被发送到服务器上的“demo-form.php”。</p> </body> </html>
运行结果
2)带有复选框的表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>运行示例2</title> </head> <body> <form action="demo-form.php" method="get"> <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br> <input type="submit" value="提交"> </form> </body> </html>
运行结果
![]()
对于form表单暂时就总结这么多,随着学习的深入,在之后也会对该部分知识进行更为全面的总结。