web工程的表单（Form）和代码架构格式详解

表单的概念

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

代码

表单标签

语法：. . .

功能：用于申明表单，定义采集数据的范围，也就是和里面包含的数据将被提交到服务器或者电子邮件里。

属性：
action=url用来指定处理提交表单的格式，它可以是一个URL地址(提交给程式)或一个电子邮件地址。

method=get或post指明提交表单的HTTP方法。

TARGET="…"指定提交的结果文档显示的位置： _blank ：在一个新的、无名浏览器窗口调入指定的文档； _self ：在指向这个目标的元素的相同的框架中调入文档； _parent ：把文档调入当前框的直接的父FRAMESET框中；这个值在当前框没有父框时等价于_self； _top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self

表单域

表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据，下面分别讲述这些表单域的代码格式：

文本框

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
代码格式：

<input type="text" name="..." size="..." maxlength="..." value="...">

属性解释：
type="text"定义单行文本输入框；
name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义文本框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
value属性定义文本框的初始值

样例1代码：

<input type="text" name="example1" size="20" maxlength="15" />

多行文本框

也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。
代码格式：

<TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"></TEXTAREA>

属性解释：
name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
cols属性定义多行文本框的宽度，单位是单个字符宽度；
rows属性定义多行文本框的高度，单位是单个字符宽度；
wrap属性定义输入内容大于文本域时显示的方式，可选值如下：
默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现； Off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行； Virtual，允许文本自动换行。 Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。

样例2代码：

<TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA>

密码框

是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
代码格式：

<input type="password" name="..." size="..." maxlength="...">

属性解释：
type="password"定义密码框；
name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义密码框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。

样例3代码：

<input type="password" name="example3" size="20" maxlength="15">

隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式：

<input type="hidden" name="..." value="...">

属性解释：
type="hidden"定义隐藏域；
name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义隐藏域的值
例如：

<input type="hidden" name="ExPws" value="dd">

复选框

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。
代码格式：

<INPUT type="checkbox" name="..." value="...">

属性解释：
type="checkbox"定义复选框；
name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义复选框的值

样例4代码：

<input type="checkbox" name="yesky" value="09">xxxcom
<input type="checkbox" name="Chinabyte" value="08">

单选框

当需要访问者在单选项中选择唯一的答案时，就需要用到单选框了。
代码格式：

<input type="radio" name="..." value="...">

属性解释：
type="radio"定义单选框；
name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
value属性定义单选框的值，在同一组中，它们的域值必须是不同的。

样例5代码：

<input type="radio" name="myFavor" value="1">
<input type="radio" name="myFavor" value="2">

文件上传框

有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成POST。
代码格式：

<input type="file" name="..." size="15" maxlength="100">

属性解释：
type="file"定义文件上传框；
name属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义文件上传框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。

样例6代码：

<input type="file" name="myfile" size="15" maxlength="100">

下拉选择框

下拉选择框允许你在一个有限的空间设置多种选项。
代码格式：

<select name="..." size="..." multiple>
<option value="..." selected>...</option>
...
</select>

属性解释：
size属性定义下拉选择框的行数；
name属性定义下拉选择框的名称；
multiple属性表示可以多选，如果不设置本属性，那么只能单选；
value属性定义选择项的值；
selected属性表示默认已经选择本选项。

样例7代码：

<select name="mySel" size="1">
<option value="1" selected></option>
<option value="d2"></option>
</select>

按Ctrl可以多选
样例8代码：

<select name="mySelt" size="3" multiple>
<option value="1" selected></option>
<option value="d2"></option>
<option value="3"></option>
</select>

表单按钮

表单按钮控制表单的运作。

提交按钮

提交按钮用来将输入的信息提交到服务器。
代码格式：

<input type="submit" name="..." value="...">

属性解释：
type="submit"定义提交按钮；
name属性定义提交按钮的名称；
value属性定义按钮的显示文字；

样例9代码：

<input type="submit" name="mySent" value="发送">

复位按钮

复位按钮用来重置表单。
代码格式：

<input type="reset" name="..." value="...">

属性解释：
type="reset"定义复位按钮；
name属性定义复位按钮的名称；
value属性定义按钮的显示文字；

样例10代码：

<input type="reset" name="myCancle" value="取消">

一般按钮

一般按钮用来控制其他定义了处理脚本的处理工作。
代码格式：

<input type="button" name="..." value="..." onClick="...">

属性解释：
type="button"定义一般按钮；
name属性定义一般按钮的名称；
value属性定义按钮的显示文字；
onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为；

样例11代码：

<input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')">

以上信息来自百度百科：
https://baike.baidu.com/item/%E8%A1%A8%E5%8D%95/5380322?fr=aladdin