form表单和表格

简介:

HTML <table> 标签

border pixels 规定表格边框的宽度。 STF
cellpadding
  • pixels
  • %
规定单元边沿与其内容之间的空白。 STF
cellspacing
  • pixels
  • %
规定单元格之间的空白。 STF


HTML 5 <form> 标签

action 定义一个 URL。

当点击提交button时。向这个 URL 发送数据。

method 用于向 action URL 发送数据的 HTTP 方法。默认是 get。

HTML <input> 标签的 type 属性

button 定义可点击button(多数情况下。用于通过 JavaScript 启动脚本)。

checkbox 定义复选框。
file 定义输入字段和 "浏览"button,供文件上传。

hidden 定义隐藏的输入字段。
image 定义图像形式的提交button。

password 定义password字段。该字段中的字符被掩码。

radio 定义单选button。

reset 定义重置button。重置button会清除表单中的全部数据。
submit 定义提交button。

提交button会把表单数据发送到server。

text 定义单行的输入字段,用户可在当中输入文本。默认宽度为 20 个字符。

HTML <input> 标签的 checked 属性

checked 属性规定在页面载入时应该被预先选定的 input 元素。

checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。


HTML <option> 标签的 selected 属性

elected 属性规定在页面载入时预先选定该选项。

被预选的选项会显示在下拉列表最前面的位置。

综合案例:

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
		<meta http-equiv="refresh" contnt="3;uri=http://baidu.com"/>
		<title> hello world!</title>
		
	</head>
	<body>
		<form action="#" method="get">
			<table align="center" border='0' cellspacing="10" cellpadding="10">
				<input type="hidden" name="id" value="id"/>
				<tr>
					<td>username:</td>
					<td><input type="text" name="userName" value="" /></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" /><br/></td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="hobby" value="film" checked="checked">电影
						<input type="checkbox" name="hobby" value="net">上网<br/>
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" checked="checked"/>男
						 <input type="radio" name="sex"/>女<br/>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<input type="file" name="img"/><br/>
						<select name="list">
							<option value="aaa">aaa</option>
							<option value="aaa" selected="selected">bbb</option>
							<option value="aaa">ccc</option>
						</select><br/>
					</td>
				</tr>
				<tr>
					<td>个人介绍:</td>
					<td><textarea rows="5" cols="20"></textarea><br/></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="揭交"/>
						<input type="reset" value="重置"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>







本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5137033.html,如需转载请自行联系原作者
相关文章
|
1月前
|
JavaScript 前端开发 PHP
表格表单
表格表单
29 1
|
Web App开发 数据安全/隐私保护
解决input标签自动填充内容的问题
解决input标签自动填充内容的问题
|
4月前
|
数据采集 数据库 C++
HTML中的表格、表单标签
HTML中的表格、表单标签
38 0
|
8月前
表单标签
表单标签
33 0
|
10月前
|
数据采集 数据安全/隐私保护
什么是表单?
什么是表单?
|
11月前
|
数据安全/隐私保护
表格与表单
表格与表单
59 0
|
前端开发 数据安全/隐私保护
【前端】HTML标签:表单标签(form标签)
HTML标签:表单标签(form标签)
118 0
HTML_表单的介绍&提交按钮
HTML_表单的介绍&提交按钮
128 0
|
数据采集
html-day02表单&表格
html-day02表单&表格
|
容器
2、表格和表单元素
2、表格和表单元素
80 0
2、表格和表单元素