WEB表格和表单学习实例

最新推荐文章于 2025-06-21 15:54:23 发布

伊人冰

最新推荐文章于 2025-06-21 15:54:23 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB

本文链接：https://blog.youkuaiyun.com/sxb956347789/article/details/53175686

WEB 专栏收录该内容

7 篇文章

订阅专栏

本文通过实例详细讲解了WEB开发中表格和表单的使用，包括元素创建、样式设计、交互实现等方面，帮助读者深入理解并掌握相关技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<div><!--头部区域-->
		<head>
			<meta charset="utf-8"/>
			<title>表格学习</title>
		</head>
	</div>
	
	<body>
		<div>
			<h1>表格学习</h1>
			<p>段落<p>
		</div>
		<hr/><!-- 水平线-->
		<div>  <!--colspan列合并,rowspan行合并-->
			<h3>colspan列合并</h3>
			<table border="1">
				<tr>
					<td>
						第一行第一列
					</td>
					<td>
						第一行第二列
					</td>
				</tr>

				<tr>
					<td>
						第二行第一列
					</td>
					<td>
						第二行第二列
					</td>
				</tr>

				<tr>
					<td colspan="2">
						第三行
					</td>
				</tr>
			</table>

			<br />
		</div>
		
		<div><!--rowspan行合并-->
			<h3>rowspan行合并</h3>
			 <table border="1">
			   <!--第1行-->
				<tr>
				   <td>姓名:</td>
				   <td>小明</td>
				</tr>
			   <!--第2行-->
				<tr>
				   <td rowspan="2">喜欢水果:</td>
				   <td>苹果</td>
				</tr>
			   <!--第3行-->
				<tr>
				   <td>香蕉</td>
				</tr>
		
			</table>
		</div>
	</body>
</html>

页面图片：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>表单学习</title>
	</head>
	
	<body align="center" bgcolor="#8FBC8F">
		<div>
			<h1>表单学习</h1>
			<p>段落<p>
		</div>
		
		<div>
			<form>
			  <!--文本标签：用户名密码输入框-->
			  用户名：<input type = "text" name = "test" value = "aa"><br>    <!--aa表示默认值-->
			  密 码：<input type = "password" name = "123321" placeholder = "请输入用户名密码">
			  
			  <!--单选标签：按钮-->
			  <br><!--后面的/可加可不加-->
			  男<input type="radio" name="sex" value="man"><br>
			  女<input type="radio" name="sex" value="women">
			  
			  <!--多选标签：复选框-->       <!--汉字这里可写前面可写后面-->
			  <br><input type="checkbox" name="person" value="175cm">身高<br>
			  <input type="checkbox" name="person" value="beatiful">型男
			  <!---->
			  <!--<input type="submit"> 定义了提交按钮.-->
			  <!--当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。
				由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。-->
				
			  <br>用户名：<input type = "text" name = "test" placeholder = "请输入用户名">
			  <input type="submit" value="提交"><br><br>
			  
			  <!--文件域：选择文件-->
			  <input type="file" name="file_name"/>
			  <!--提交按钮-->
			  <input type="submit" value="提交"><br>
			  详情：<br><!--文本域标签-->
			  <textarea rows="10" cols="30">内容：</textarea>
			  <!--提交按钮-->
			  <input type="submit" value="提交"><br>
				
			  <!--下拉选择-->
			  <select>
					<option>java</option>
					<option>andriod</option>
					<option>web</option>
			  </select>	
			</form>
			
			
			
			 <!--这句话作用为：当在用户输入任意字母是，提交会自动跳转到百度去-->
			 <!--表单 属性action:表单处理地址  method：请求方法 http  
			 get URL可以看到对应密码用户信息等  port作为消息体不是url可视化-->
			<form name="input" action="http://www.baidu.com" method="get">   
			  <br>用户：<input type = "text" name = "test" placeholder = "请输入用户名">
			  <input type="submit" value="提交">
			</form>
		</div>
	</body>
</html>

页面：