HTML中常用的表单元素包括：文本区域（TEXTAREA），列表框（SELECT），文本输入框（INPUT type=text），密码输入框（INPUT type=password），单选输入框（INPUT type=radio），复选输入框（INPUT type=checkbox），重置按钮、提交按钮、隐藏域、等等。
一、文本域<input type="text" name="text" value="" />
二、密码域
密码跟文本框类似，但是在里面输入的内容显示为圆点。
<input type="password" name="text" value="" />
三、单选按钮
男人:<input type="radio" name="sex" value="male" /> Male<br />
女人：<input type="radio" name="sex" value="female" /> Female
四、复选框
<input type="checkbox" name="check1" value="" />
五、按钮
<input type="button" value="确认" />
六、重置按钮
当点击重置按钮时，重置按钮所在的表单将全部清空，而其他表单不受影响。<input type="reset" value="重置" />
七、提交按钮
当点击提交按钮时，浏览器将自动提交表单。<input type="submit" value="提交" />
八、隐藏域
隐藏域在浏览器中并不显示，仅仅为保存一些不太重要的资料而存在。<input type="hidden" value="我是一个隐藏域" />
九、上传域<input type="file" value="" />
十、按钮<input type="image" src="123gif" />
十一、下拉列表<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
例如：
属性：disabled，可选值：disabled ，说明：规定禁用该下拉列表。
十二、label
abel 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。例如，当将单选按钮放在label内。则点击label内的文字也会触发单选按钮，而不必只是点中小圆点。
例如：
<label><input type="radio" name="male" />男人</label></p>
<label><input type="radio" name="male" />女人</label></p>
十三、禁用（disabled）与只读（readonly）
禁用和只读属性。readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。
禁用文本框：<input type="text" disabled="disabled" />
只读文本框: <input type="text" readonly="readonly" /></form>
十四、TextArea
十五、fieldset 定义域
fieldset用于给表单元素分组，legend用于设置分组标题。
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签，这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮，包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
随便都可以啊，只要分清楚功能就行了，如果表格放在表单中，那么你可以在这个表格中只设置一个提交，就可以了。如果你要把表单放到表格中，可以放置多个提交按钮在里面。
其中最常用的还是表单嵌套表格。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">
<html xmlns="http://wwww3org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品订购</title>
</head>
<body><form action="#" method="post">
<table width="1000" border="1">
<tr>
<th colspan="4">产品订购</th>
</tr>
<tr>
<td style="text-align:right">姓名：</td>
<td><input type="text" name="consumer" /></td>
<td>商品名称：</td>
<td><input type="text" name="goods_name" /></td>
</tr>
<tr>
<td style="text-align:right">地区：</td>
<td>
<select name="address">
<option value="guangzhou">广州</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
</td>
<td>付款方式：</td>
<td>
<input type="radio" name="pay" value="network" />网上
<input type="radio" name="pay" value="mail" />邮局
<input type="radio" name="pay" value="bank" />银行
</td>
</tr>
<tr>
<td style="text-align:right">关注产品：</td>
<td colspan="3">
<input type="checkbox" name="hufu" checked="checked" />护肤品
<input type="checkbox" name="huazhuang" />化妆品
<input type="checkbox" name="fuzhuang" checked="checked" />服装
<input type="checkbox" name="dianqi" />电器
</td>
</tr>
<tr>
<td style="text-align:right">联系电话：</td>
<td colspan="3"><input type="text" name="phone" /></td>
</tr>
<tr>
<td style="text-align:right">备注：</td>
<td colspan="3">
<textarea name="comment" rows="10" cols="80"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td colspan="3">
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
可否满意？
讲form标签的margin属性设置为0px即可
<html>
<body>
<table width="100%" border="1">
<tr>
<td width="20%" height="120"> </td>
<td width="60%" height="120">
<form style="margin:0px; padding:0px;">
<table width="100%" height="120" border="1">
<tr>
<td width="40%" height="40">姓名</td>
<td width="60%" height="40"><input type="text" name="姓名"></input>
</tr>
<tr>
<td width="40%" height="40">密码</td>
<td widht="60%" height="40"><input type="password" name="密码"></input>
</tr>
<tr>
<td widht="100%" height="40" colspan="2" align="center">
<input type="button" value="注册"></input>
</td>
</tr>
</table>
</form>
</td>
<td width="20%" height="120"> </td>
</tr>
</table>
</body>
</html>
1、HTML超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
2、HTML表单用于搜集不同类型的用户输入。表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（<form>）定义。
3、HTML表单是重要的HTML元素，表单提交是前端往后端提交数据的常见方式。
4、希望对你有帮助。
表格：
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、、列表、段落、表单、水平线、表格等等。border是边框属性。
row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2
运行结果：
image
表格标签：
| 标签 | 描述 |
|
| 定义表格 |
|
| 定义表格的行 |
|
| 定义表格列的组 |
|
| 定义用于表格列的属性 |
|
| 定义表格的页眉 |
|
| 定义表格的主体 |
|
| 定义表格的页脚 |
表格形式：
1无边框表格
第一种：100200300400500600第二种：100200300400500600
2表头
水平标题：表头一表头二表头三100200300垂直标题：表头一100表头二200表头三300
运行结果：
3标题
标题表头一100表头二200表头三300
运行结果：
4跨行跨列的表格单元格（
合并单元格：
单元格属性：
colspan=2 水平合并 向右合并 值包含自己
rowspan=2 垂直合并 向下合并 值包含自己
合并单元格本质就是改变宽度 高度 占位实现的
）
表头一表头二100200300表头一100表头二200300
运行结果：
5表格内的标签
这是一个段落
这是另一个段落
运行结果：
6单元格边距， cellpadding="0" 边距（内容和单元格的距离）
运行结果：
7单元格间距， cellspacing="0" 间距（单元格与单元格的距离
运行结果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）