WEB表格和表单学习实例

本文通过实例详细讲解了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>

页面:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值