html+css+js--简单的个人信息登录表

运行结果:

代码如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    	<h1 style="text-align:center;">个人信息登录表</h1>
        <form action="chenggong.html" method="post" target="_blank">
        		<fieldset>
        			<legend>基本信息</legend>
        			<table>
        				<tr>
        					<td>
        						<label for="username">用户名:</label>
        					</td>
        					<td>
        						<input type="text" name="username" id="username" value="" size="16" maxlength="10">请输入用户名
        					</td>
        				</tr>
        				<tr>
        					<td>
        						<label for="password">密码:</label>
        					</td>
        					<td>
        						<input type="password" name="password" id="password" value="" size="16" maxlength="8">请输入密码
        					</td>
        				</tr>
        				<tr>
        					<td>
        						<label for="sex">性别:</label>
        					</td>
        					<td>
        						<input type="radio" name="sex" value="female">女
        						<input type="radio" name="sex" value="female">男
        					</td>
        				<tr>
        					<td>
        						<label for="photo">请上传照片</label>
        					</td>
        					<td>
        						<input type="file" name="photo" id="photo">
        					</td>
        				</tr>
        				</tr>
             			</table>
        		</fieldset>
        		
        		<fieldset>
        			<legend>其他资料</legend>
        			<p>请选择你喜欢的音乐类型(可多选):
        				<input type="checkbox" name="music" id="rock" checked>
        				<label for="rock">摇滚</label>
        			    <input type="checkbox" name="music" id="jazz">
        				<label for="jazz">爵士</label>
        			    <input type="checkbox" name="music" id="pop">
        				<label for="pop">流行</label>
        				<input type="checkbox" name="music" id="gudian">
        				<label for="gudian">古典</label>
        			</p>
                    
                    <p>
                    	请选择你所居住的城市:
                        <input type="radio" name="city" id="wuhan" value="wuhan" checked="checked">
                        <label for="wuhan">武汉</label>
                        <input type="radio" name="city" id="huangshi" value="huangshi">
                        <label for="huangshi">黄石</label>
                        <input type="radio" name="city" id="shiyan" value="shiyan">
                        <label for="shiyan">十堰</label>
                        <input type="radio" name="city" id="jingzhou" value="jingzhou">
                        <label for="jingzhou">荆州</label>
                        <input type="radio" name="city" id="yichang" value="yichang">
                        <label for="yichang">宜昌</label>
                    </p>

                    <p>
                        <label for="season">请选择你喜欢的城市季节:</label>
                        <select name="season">
                            <option value="spring">春</option>
                            <option value="summer">夏</option>
                            <option value="autumn">秋</option>
                            <option value="winter">冬</option>
                        </select>
                    </p>

                    <p>
                       <label for="habit">你的兴趣爱好(可多选):</label><br> 
                       <select name="habit" id="habit" size="5" multiple>
                            <option value="movie">看电影</option>
                            <option value="shopping">逛街</option>
                            <option value="draw">绘画</option>
                            <option value="sing">唱歌</option>
                            <option value="football">踢足球</option>
                        </select>
                    </p>
        		</fieldset>

                <label for="comment">请做一个简短的自我介绍</label><br>
                <textarea name="comment" id="comment" cols="30" rows="10">
                </textarea>
                <p>
                <input type="submit" name="submit" value="登录">
                <input type="reset" name="reset" value="重置">
                <input type="button" value="关闭窗口" onclick="window.close()">
                </p>
        </form>
    </body>
</html>

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

正在奋斗的程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值