表单基础
程序员文章站
2022-04-18 21:26:10
...
一 介绍
所有表单都是通过<form>标签开始，使用</form>标签结束，一个页面可以定义多个表单，但是表单不可以嵌套，即表单中不可以再定义表单。
HTML表单提供了几种输入信息的元素，包括单选框、复选框、文本框等表单元素，待用户添加或选择表单元素的信息后，一般情况下都将这些信息添加到Web服务器，然后由服务器程序（JSP程序、PHP程序等）处理这些信息。
表单的属性如下。
| 属 性 | 说 明 |
| action | 表示表单所要提交的URL |
| method | 表示表单以何种方式进行提交，提交表单包括get与post方式进行提交。get为表单默认选项，它将指定提交的URL在地址栏上显示。post选项将表单与指定提交的URL分开传送 |
| enctype | 当向服务器发送数据时，数据应该使用的编码方式，enctype默认是“application/x-www-form- urlencoded”，如果要上传文件，可以将enctype设置为“multipart/form-data” |
| target | 指定服务器返回的结果在哪里显示 |
| name | 赋给表单一个名称 |
二 代码
index.html代码如下：
在上述代码中可以看到建立一个带有两个框架的HTML页面，使用<frameset>元素在HTML文件中定义框架，顶部框架放置的HTML文件为basic.html，底部框架没有放置HTML文件。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>表单基础</title> </head> <frameset rows="100,*" frameborder="NO" border="0" framespacing="0"> <frame src="basic.html" name="mainFrame"> <frame src="" name="bottomFrame" scrolling="NO" noresize> </frameset> <noframes><body> </body></noframes> </html>
basic.html代码如下：
<form action="file.html" name="form1" method="post" target="bottomFrame"/> <input type="text" name="name" value="我是一般文本框"> <input type="submit" value="单击此按钮将显示文件上传文本框"> </form>
可以从上述代码中看到，在basic.html文件中定义了一个表单，定义action的URL为file.html，设置表单提交方式为post，target为bottomFrame，即底部框架。
当在basic.html文件中单击提交按钮后，将提交到file.html。
file.html代码
<form action="" name="form2" method="post" enctype="multipart/form-data"/> <input type="file"/> </form>
由于在basic.html文件中的表单指定target为bottomFrame，所以file.html文件将在底部框架中显示。在file.html中的表单除了设置表单的名称、表单提交方式之外还设置enctype属性为“multipart/form-data”，此时表单可以进行上传操作。
三 运行结果
上一篇： AngularJs表单校验实例