表单在网页中随处可见。
我们来做一个表单出来，来综合理解一下表单。

1，创建表单

在HTML中，< form >标记用于定义表单域，即创建一个表单，基本语法如下:

<form action="url地址" method="提交方式" name="表单名称">
</form>

其中，action属性用于指定表单提交的地址，提交之后表单的数据会交给地址对应的内容去做。比如javaweb中的“login.jsp”。method属性用于设置表单数据的提交方式，取值有GET和POST。其中，GET为默认值这种方式提交的数据将显示在浏览器的地址栏中，保密性差且数据量小。而POST提交方式不但保密性好，还可以提交大量数据，所以开发中通常使用POST方式提交表单。

2，表单控件

网页中的表单，使用< input />控件来定义单行文本输入框，单选按钮，复选框，重置按钮等。语法如下：

<input type="控件类型" />

在上述语法中，type属性为其最基本的属性，取值有多重，用来指定不同的控件类型。除了type属性外，< input />控件还可以定义很多种其他属性，其中，比较常用的如id，name，value，size，它们分贝用来指定input控件的ID值，名称，控件中的默认值和控件在页面中的显示宽度。

下面来一个例子
上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单example</title>
</head>
<body>
  <fieldset>  
    <legend>注册新用户</legend>	
    <!-- 表单提交地址为#，表单数据的提交地址方式为POST -->
    <form action="#" method="post">
        <table cellpadding="2" align="center">
            <tr>
                <td align="right">用户名:</td>
                <td>
                    <!-- 1.文本输入框控件 -->
                    <input type="text" name="username" />	 
                </td>
            </tr>
            <tr>
                <td align="right">密码:</td>
                <!-- 2.密码输入框控件 -->
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td align="right">性别:</td>
                <td>
                     <!-- 3.单选输入框控件，由于无法输入value, 所以预先定义好 -->
                    <input type="radio" name="gender" value="male" /> 男 
                    <input type="radio" name="gender" value="female" /> 女 
                </td>
            </tr>
            <tr>
                <td align="right">兴趣:</td>
                <td>
                <!-- 4.复选框控件 -->
               <input type="checkbox" name="interest" value="film" /> 看电影
               <input type="checkbox" name="interest" value="code" /> 敲代码
               <input type="checkbox" name="interest" value="game" /> 打网球
                </td>
            </tr>
            <tr>
                <td align="right">头像:</td>
                <td>
                   <!-- 5.文件上传控件 -->
                    <input type="file" name="photo" />
                </td>
            </tr>
            <tr>
                <td colspan="2"  align="center">
                    <!-- 6.提交按钮控件 -->
                    <input type="submit" value="注册" />  
                    <!-- 7.重置按钮控件，单击后会清空当前form -->
                    <input type="reset" value="重填" />    
                </td>
            </tr>
        </table>
    </form>
   </fieldset>
</body>
</html>

//output：

html5 form表单 demo html表单教程_html5 form表单 demo

在上述例子中，name控件属性代表控件名称，value属性表示该控件的值。要注意的是，单选框控件和复选框控件必须指定相同的name值，这是为了方便在处理页面数据时获取表单传递的值（表单所传递的值就是该控件指定相同的value值）。
上述代码中，还使用了< fieldset >和< legend >标记。< fieldset >标记的作用是将表单内的元素分组，而< lengend >标记则为< fieldset >标记定义标题。