html后续补充之表单模块

该做项目了,但发现自己的HTML表单掌握的并不是太理想,就又翻了翻书,根据书中的内容自己做了下总结,

第一部分:表单的类型划分如下:

1.text属性  用来定义文本信息,比较重要的属性是name。

2.radio 单选按钮,用来定义单选按钮,例如性别的选择等等,比较重要的属性name(注意各个单选框属性名字是相同的),value,为了鉴别用户选择的是哪一个单选框而设置的值,换句话说就是传入后台的数据。

3.checkbox多选框,比较重要的属性是名字name,因为要传递多个值,所以要定义成数组的形式,value,传入后台的数值。

4.下拉菜单和前边几个不相同的是:这个是放在<select></select>中的<option>,比较重要的属性:select里的name属性,option里的value属性。

5.提交按钮    submit,比较重要的属性:value属性

6.重置按钮    reset,比较重要的属性:value属性

8.文本行        textarea  ,比较重要的属性rols宽,cols长

第二部分:

表格与菜单的关系及相关属性

table 常用的属性:

cellpadding:设置表格行间距

cellspacing:设置表格列间距

border:定义边框

关于表格:

<td></td>属性:

colspan:竖着占几个表格,跟数字

rolspan:横着占几个表格,后跟数字

因为表格有限定数据位置的作用,所以可以利用表格来进行布局,具体请看3

第三部分

代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<center>
		<h1>我的表单</h1>
		<hr/>
		<table border="0" cellpadding="10" cellspacing="10">
			<form action="test.php" method="post">
				<tr>
					<td>姓    名:</td>
					<td><input type="text" name="name"></td>
				</tr>
				<tr>
					<td>密码输入:</td>
					<td><input type="password" name="pwd"></td>
				</tr>
				<tr>
					<td>
						性    别:
					</td>
					<td>
						<input type="radio" name="sex" value="0">男
						<input type="radio" name="sex" value="1">女
					</td>
				</tr>
				<tr>
					<td>
						爱    好:
					</td>
					<td>
						<input type="checkbox" name="hobby[]" value="0">游戏
						<input type="checkbox" name="hobby[]" value="1">看书
						<input type="checkbox" name="hobby[]" value="2">运动
					</td>
				</tr>
				<tr>
					<td>
						来    自:
					</td>
					<td>
						<select name="city">
							<option value="">--请选择城市--</option>
							<option value="shanghai">上海</option>
							<option value="wuhan">湖北</option>
							<option value="henan">河南</option>
							<option value="hunan">湖南</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>个人简介:</td>
					<td>
						<textarea rows="10" cols="30"></textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="reset" value="重置">
					</td>
				</tr>




			</form>
		
		</table>
	</center>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/sinat_35161044/article/details/82052927