Web表格表单（二）_利用表单和表单元素设计简单的应聘页面代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_60586504/article/details/134606552

3、在MyWeb文件夹中用HBuilder X等编辑器编写为MyFormDemo_1. html的文件。按如下要求设计“登录页面”。浏览器运行结果如下图所示：设计要求如下：

（1）页面标题为“登录页面”；

（2）页面中域标题为“登录页面”，域的相关属性设置为：宽度为300px、高度为150px边框线宽3px、线型：double 、线的颜色：#0033ff、文本对齐方式：center；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
			<title>登录页面</title>
			<style type="text/css">
				fieldset {
					width: 300px;
					height: 150px;
					border: 3px double #0033ff;
					text-align: center;
				}
			</style>
	</head>
	<body>
		<form>
			<fieldset>
				<legend align="left">登录页面</legend>
				用户名：<input type="text" size="20"><br>
				&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="text" size="20"><br> 
				类&nbsp;&nbsp;&nbsp;&nbsp;型：
				<input type="radio" />管理员
				<input type="radio" />普通用户<br> &nbsp;&nbsp;&nbsp;&nbsp;
				<input type="checkbox">记住密码
				<input type="checkbox">自动登录<br>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="submit" value="提交">
				&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="reset" value="重置">
			</fieldset>
		</form>
	</body>
	
</html>

4、在MyWeb文件夹中用HBuilder X等编辑器编写为MyFormDemo_2. html的文件。按如下要求利用表单和表单元素设计简单的应聘页面。浏览器运行结果如下图所示：设计要求如下：

（1）页面标题为“应聘页面”；

（2）网页中“希望工作地点：”、“月薪要求：”、“请选择应聘行业：”设置加粗显示；

（3）在网页的“希望工作地点：”后的下拉列表项有北京、上海、广州、西安、杭州、南京、重庆、天津八个地方，size=“1”；

（4）“月薪要求：”后的单行文本框size=“10”；“请选择应聘行业：”下的下拉列表项size=“8”。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>应聘页面</title>
	</head>
	<body>
		<form>
			<font size="4"><strong>希望工作地点：</strong></font>
			<select name="didian">
				<option value="1">北京</option>
				<option value="2">广州</option>
				<option value="3">深圳</option>
				<option value="4">上海</option>
			</select>
			<font size="4"><strong>月薪要求：</strong></font><input type="text" size="10">
			<input type="checkbox">要求提供过渡住房<br>
			<font size="4"><strong>请选择应聘行业：</strong></font><br>
			<select size="8">
				<option selected>计算机软件</option>
				<option>计算机硬件</option>
				<option>计算机服务</option>
				<option>通信/电信/网络设备</option>
				<option>互联网/电子商务</option>
				<option>网络游戏</option>
				<option>电子技术/半导体/集成电路</option>
				<option>仪器仪表/工业自动化</option>
			</select>
			<input type="submit" value="提交">
			<input type="reset" value="重置">
		</form>
	</body>
</html>