博主信息
博文 4
粉丝 0
评论 0
访问量 2730
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
3-20-关于表单
罗树的博客
原创
683人浏览过

代码展示:

实例

<html lang="en">         
<head>
	<meta charset="UTF-8">
	<title>表单</title>
	<style type="text/css">
		body{
			font-family: 微软雅黑;
		}
		input,textarea{
			padding: 15px;
		    border: 1px solid #ccc;
		    border-radius: 5px;
		    box-sizing: border-box;
		    font-family: 微软雅黑;
		    color: #2C3E50;
		    font-size: 13px;
		}
		.button{
			width: 100px;
    		background: #27AE60;
    		font-weight: bold;
    		color: white;
    		border: 0 none;
    		border-radius: 5px;
    		cursor: pointer;
    		padding: 10px 5px;
    		margin: 10px 5px;
		}
		.button:hover{
			box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
		}
	</style>
</head>
<body>
	<form action="do.php" method="post">
		<table border="0" cellspacing="0" cellpadding="8" align="center" width="800" bgcolor="powderblue">
			<caption><h2>用户注册</h2></caption>

			<tr><td colspan="2"><hr></td></tr>
			<tr align="center">
				<td align="right"><label for="email">邮箱:</label></td>
				<td align="left"><input type="text" name="email" id="email" placeholder="example@php.cn" size="30"></td>
			</tr>

			<tr align="center">
				<td align="right"><label for="password">密码:</label></td>
				<td align="left"><input type="password" name="password" id="password" placeholder="字母+数字不得少于8位" size="30"></td>
			</tr>		

			<tr align="center">
				<td align="right">性别:</td>
				<td align="left">
					<input type="radio" name="sex" value="male">男
					<input type="radio" name="sex" value="female">女
					<input type="radio" name="sex" value="secret" checked="">保密
				</td>
			</tr>			

			<tr align="center">
				<td align="right">兴趣:</td>
				<td align="left">
					<input type="checkbox" name="hobby[]" value="html">HTML
					<input type="checkbox" name="hobby[]" value="css">CSS
					<input type="checkbox" name="hobby[]" value="javascript">JAVASCRIPT
					<input type="checkbox" name="hobby[]" value="php">PHP
				</td>
			</tr>

			<tr align="center">
				<td align="right">级别:</td>
				<td align="left">
					<select name="level">
						<option value="0">小白</option>
						<option value="1" selected="">基础</option>
						<option value="2">有经验</option>
					</select>
				</td>
			</tr>	

			<tr align="center">
				<td align="right">头像:</td>
				<td align="left">
					<img src="../images/0320-1.png" width="30">
					<input type="file" name="photo" accept="images/*">
				</td>
			</tr>						

			<tr align="center">
				<td align="right"><label for="comment">备注:</label></td>
				<td align="left">
				<textarea rows="5" cols="40" name="comment" id="comment" placeholder="文明上网 理性发言"></textarea></td>
			</tr>

			<tr align="center">
				<td colspan="2">
					<hr>
					<input type="submit" name="submit" class="button" value="提交">
					   
					<input type="reset" name="reset" class="button" value="重置">
				</td>
			</tr>

		</table>
	</form>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写作业:0320-2.jpg0320-1.jpg

效果演示:0320-3.png

批改状态:合格

老师批语:作业已检查! 手写代码未提交!请及时提交!
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学