how2j.cn

下载区
文件名 文件大小
answer.html 3k

工具版本兼容问题
使用前面用到的各种表单元素,实现如下效果。
答案在右侧,尽量先自己做。



步骤 1 :

练习效果图

edit Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
这是一个常见的注册页面
输入用户名,密码,email,性别,生日,手机等等

注意
: 居住地的省,市,区,街道只是举的例子,并不是要求把全国的都列罗出来
练习效果图


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-11-14 完成
_云兔




OK
加载中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <table align="center">
            <tr>
                <td align="right"><font color="F0000">*</font>用户名:</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td align="right"><font color="F0000">*</font>密码:</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td><font color="F0000">*</font>确认密码:</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td align="right"><font color="F0000">*</font>Email:</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td align="right"><font color="F0000">*</font>真实姓名:</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td align="right"><font color="F0000">*</font>性别:</td>
                <td><input type="radio" name="1" id="123"><label for="123">男</label><input type="radio" name="1" id="321"><label for="321">女</label></td>
            </tr>
            <tr>
                <td align="right"><font color="F0000">*</font>生日:</td>
                <td>
                    <select>
                        <option selected disabled>请选择</option>
                        <option>1997</option>
                        <option>1998</option>
                        <option>1999</option>
                        <option>2000</option>
                    </select>
                    <select>
                        <option selected disabled>请选择</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                    <select>
                        <option selected disabled>请选择</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right"><font color="F0000">*</font>手机:</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td align="right"><font color="F0000">*</font>居住地:</td>
                <td>
                    <select>
                        <option selected disabled>请选择</option>
                        <option>广东省</option>
                        <option>广西省</option>
                        <option>四川省</option>
                    </select>
                    <select>
                        <option selected disabled>请选择</option>
                        <option>梅州市</option>
                        <option>钦州市</option>
                        <option>成都市</option>
                    </select>
                    <select>
                        <option selected disabled>请选择</option>
                        <option>兴宁市</option>
                        <option>灵山县</option>
                        <option>成华区</option>
                    </select>
                    <select>
                    <option selected disabled>请选择</option>
                    <option>坭陂镇</option>
                    <option>新圩镇</option>
                    <option>三圣乡</option>
                </select>
                </td>
            </tr>
            <tr>
                <td align="right"><font color="F0000">*</font>QQ:</td>
                <td><input type="text">
            <br>
                <font size="-1" color="blue">设置我的QQ在线状态</font>
                </td>
            </tr>

        </table>
    </form>
</body>
</html>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-10-30 晚安。莫甘娜
枫哥




晚安
加载中
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table align="center">
			<tr>
				<td align="right"><font color="FF0000">*</font>用户名:</td>
				<td><input type="text" name="name"/ size="30"><font color="#FF0000">用户名不得小于3个字符</font></td>
			</tr>
			<tr>
				<td align="right"><font color="FF0000">*</font>密码:</td>
				<td><input type="password" name="password" size="30"></td>
			</tr>
			<tr>
				<td align="right"><font color="FF0000">*</font>确认密码:</td>
				<td><input type="password" name="password" size="30"></td>
			</tr>
			<tr>
				<td align="right"><font color="FF0000">*</font>Email:</td>
				<td><input type="email" name="email" size="30"></td>
			</tr>
			<tr>
				<td align="right"><font color="#FF0000">*</font>真实姓名:</td>
				<td><input type="text" name="mingzi" placeholder="请输入您的真实姓名" size="30"></td>
			</tr>
			<tr>
				<td align="right"><font color="#FF0000">*</font>性别:</td>
				<td><select>
					<option>男</option>
					<option>女</option>
				</select>
			</td>
			</tr>
			<tr>
				<td align="right"><font color="#FF0000">*</font>生日:</td>
				<td>
					<select name="select1">
						<option>1980</option>
						<option>1981</option>
						<option>1982</option>
						<option>1983</option>
						<option>1984</option>
						<option>1985</option>
						<option>1986</option>
						<option>1987</option>
						<option>1988</option>
						<option>1989</option>
						<option>1990</option>
					</select>
					<select name="select2">
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
						<option>6</option>
					</select>
					<select name="select3">
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
						<option>31</option>
					</select>
				</td>
			</tr>
			<tr>
				<td align="right"><font color="#FF0000">*</font>手机:</td>
				<td><input type="text" name="shouji"></td>
			</tr>
			<tr><td align="right"><font color="#FF0000">*</font>居住地:</td>
				<td><select name="select4">
					<option>四川省</option>
					<option>浙江省</option>
					<option>贵州省</option>
					<option>江苏省</option>
				</select>
				<select name="select5">
					<option>成都市</option>
					<option>杭州市</option>
					<option>贵阳市</option>
					<option>南京市</option>
				</select>
				<select name="select5">
					<option>成华区</option>
					<option>西湖区</option>
					<option>花溪区</option>
					<option>江宁区</option>
				</select>
				<select name="select6">
					<option>三圣乡</option>
					<option>玫瑰乡</option>
					<option>英武乡</option>
					<option>淳化乡</option>
				</select>
				</td>
				</tr>
				<tr>
					<td align="right"><font color="#FF0000">*</font>QQ:</td>
					<td><input type="text" name="QQ" size="30">
				<br>
					<font size="-1" color="blue">设置我的QQ在线状态</font>
					</td>
					</tr>
		</table>
	</body>
</html>

							


1 个答案

_云兔
答案时间:2020-11-14
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action=""> <table align="center"> <tr> <td align="right"><font color="F0000">*</font>用户名:</td> <td><input type="text"></td> </tr> <tr> <td align="right"><font color="F0000">*</font>密码:</td> <td><input type="password"></td> </tr> <tr> <td><font color="F0000">*</font>确认密码:</td> <td><input type="password"></td> </tr> <tr> <td align="right"><font color="F0000">*</font>Email:</td> <td><input type="text"></td> </tr> <tr> <td align="right"><font color="F0000">*</font>真实姓名:</td> <td><input type="text"></td> </tr> <tr> <td align="right"><font color="F0000">*</font>性别:</td> <td><input type="radio" name="1" id="123"><label for="123">男</label><input type="radio" name="1" id="321"><label for="321">女</label></td> </tr> <tr> <td align="right"><font color="F0000">*</font>生日:</td> <td> <select> <option selected disabled>请选择</option> <option>1997</option> <option>1998</option> <option>1999</option> <option>2000</option> </select> <select> <option selected disabled>请选择</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <select> <option selected disabled>请选择</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </td> </tr> <tr> <td align="right"><font color="F0000">*</font>手机:</td> <td><input type="text"></td> </tr> <tr> <td align="right"><font color="F0000">*</font>居住地:</td> <td> <select> <option selected disabled>请选择</option> <option>广东省</option> <option>广西省</option> <option>四川省</option> </select> <select> <option selected disabled>请选择</option> <option>梅州市</option> <option>钦州市</option> <option>成都市</option> </select> <select> <option selected disabled>请选择</option> <option>兴宁市</option> <option>灵山县</option> <option>成华区</option> </select> <select> <option selected disabled>请选择</option> <option>坭陂镇</option> <option>新圩镇</option> <option>三圣乡</option> </select> </td> </tr> <tr> <td align="right"><font color="F0000">*</font>QQ:</td> <td><input type="text"> <br> <font size="-1" color="blue">设置我的QQ在线状态</font> </td> </tr> </table> </form> </body> </html>



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-10-23 改变浏览器的宽度,布局会混乱
2020-09-01 请大家看看不足之处
2020-07-10 使用表格table和input表单可以做个简单类似页面,不唯一,可以提意见


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 24 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-HTML-阶段性练习3 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 635924385
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图