form表单

最新推荐文章于 2022-03-07 14:55:11 发布

鬼道迷踪

最新推荐文章于 2022-03-07 14:55:11 发布

阅读量101

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_39129186/article/details/118973489

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input[type='text']{
				width: 300px;
				height: 40px;
			}
			input[type='number']{
				width: 300px;
				height: 40px;
			}
			#p{font-size: 20px;font-weight: bold;width: 100px;text-align: center;padding-bottom: 30px;}
			table{margin-left: auto;margin-right: auto;width: 350px;background-color: bisque;padding: 20px;}
			
			input[type='submit']{
				background-color: coral;
				border: 0px;
				color: azure;
				width: 50px;
				height: 30px;

			}
			
			input[type='reset']{
				background-color:gainsboro;
				border: 0px;
				color:black;
				width: 50px;
				height: 30px;
			}
			
			#p2{padding-top: 10px;}
			
		</style>
	</head>
	<body style="font-size: 16px;">
		<form method="post" action="http://localhost:8888/student/add">
			<table>
				<tr>
					<td id="p">学生信息管理系统MIS</td>
				</tr>
				<tr>
					<td>姓名:</td>
				</tr>
				<tr>
					<td>
						<input type="text" name="user" placeholder="请输入姓名..." />
					</td>
				</tr>
				
				<tr>
					<td>年龄:</td>
				</tr>
				<tr>
					<td>
						<input type="number" name="age" placeholder="请输入年龄..." />
					</td>
				</tr>
				
				<tr>
					<td>
						性别：（单选框）
						<input type="radio" name="sex" checked="checked" value="0"/>男
						<input type="radio" name="sex"   value="1"/>女
					</td>
				</tr>
				
				<tr>
					<td>
						爱好：（多选）
						<input type="checkbox" name="hobby" checked="checked" value="ppq"/>乒乓球
						<input type="checkbox" name="hobby"  value="ps"/>爬山
						<input type="checkbox" name="hobby"  value="cg"/>唱歌
					</td>
				</tr>
				
				<tr>
					<td>学历：（下拉框）
						<select name="edu">
						<option value="1">本科</option>
						<option value="2">专科</option>
						<option value="3">研究生</option>
						</select>
					</td>
				</tr>


				<tr>
				     <td>
				        入学日期:
				     </td>
				</tr>
				
				<tr>
					<td>
						<input type="date" name="intime" />
					</td>
				</tr>
				<tr>
					<td id="p2">
						<input type="submit" value="保存" />
						<input type="reset" value="取消" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

table 标签用来表示表格
tr 标签表示表里的一行
td 标签表示行里的列
border 设置边框
cellspacing 设置单元格的间距
bgcolor 设置背景色
width 设置宽度
height 设置高度
colspan 合并列
rowspan 合并行



form标签用来提交表单里的数据
table标签用来实现表格
tr标签用来表示表格里的行
td标签表示行里的列
img标签表示插入图片
select标签表示下拉框，option是下拉选项
textarea标签是文本域
input表示输入框，类型很丰富
text类型是普通的文本输入框
password是密码输入框
email是邮箱的输入框
file是上传文件
radio是单选框
checkbox是多选框
button是普通的按钮
submit是提交按钮，比button多了数据提交的功能
align属性用来设置元素的位置center是居中
bordercolor设置边框的颜色


       <audio controls="controls">
       <source src="wq1284.mp3"></source>
       </audio>


       <video controls="controls" loop="loop">
       <source src="yibo.mp4"></source>
       </video>

       
           <a name="top">北京市富婆通讯录</a>
               <h1>18518518515</h1>
               <h1>123</h1>
               <h1>123</h1>
               <h1>123</h1>
               <h1>123</h1>
               <h1>123</h1>
               <h1>123</h1>
               <h1>123</h1>
               <h1>123</h1>
               <h1>123</h1>
               <h1>123</h1>
           
           <a href="#top">点我，回到顶部</a>

鬼道迷踪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
form表单

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> input[type='text']{ width: 300px; height: 40px; } input[type='number']{ width: 300px; height: 40px; }.
复制链接

扫一扫