Form Nested Form

Form Nested Form

Codes are as follows: index.html

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>求职</title>
</head>

<body>
	<table>
		<form>
			<tr>
				<td colspan="2"><strong>基本个人信息(<font color="red">*</font>为必填项)</strong></td>
			</tr>
			<tr>
				<td>
					<font color="red">*</font>姓名
				</td>
				<td><input type="text" id="name" required></td>
			</tr>
			<tr>
				<td>
					<font color="red">*</font>性别
				</td>
				<td><input type="radio" name="1" checked>男
					<input type="radio" name="1">女
				</td>
			</tr>
			<tr>
				<td>
					<font color="red">*</font>出生日期
				</td>
				<td>
					<select>
						<option selected>1998</option>
						<option>1999</option>
						<option>2000</option>
					</select>年
					<select>
						<option selected>1</option>
						<option>2</option>
						<option>3</option>
					</select>月
					<select>
						<option selected>1</option>
						<option>2</option>
						<option>3</option>
					</select>日
				</td>
			</tr>
			<tr>
				<td>国家或地区</td>
				<td>
					<select>
						<option selected>中国大陆</option>
						<option>美国</option>
						<option>英国</option>
					</select>
				</td>
				<td>户口
					<select>
						<option selected>北京</option>
						<option>成都</option>
						<option>遂宁</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<font color="red">*</font>证件号
				</td>
				<td>
					<input type="text">
				</td>
				<td>
					<font color="red">*</font>证件类型
					<select>
						<option selected>身份证</option>
						<option>学生证</option>
						<option>健康证</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<span>目前年薪</span>
				</td>
				<td>
					<select>
						<option selected>--请输入--</option>
					</select>/年
				</td>
				<td>
					<span>币种</span>
					<select>
						<option selected>人民</option>
						<option>欧元</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<font color="red">*</font>工作年限
				</td>
				<td>
					<select>
						<option selected>--选择--</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<font color="red">*</font>
					<span>居住地</span>
				</td>
				<td>
					<select>
						<option selected>北京市</option>
						<option>成都市</option>
					</select>
					<select>
						<option selected>北京市</option>
						<option>遂宁市</option>
					</select>
				</td>
				<td>
					<font color="coral">选项中没有的城市,选省即可</font>
				</td>
			</tr>
			<tr>
				<td>
					<font color="red">*</font>
					<span>Email<span>
				</td>
				<td>
					<input type="text" placeholder="[email protected]">
				</td>
			</tr>
			<tr>
				<td>
					<font color="red">*</font>首选联系方式
				</td>
				<td>
					<select>
						<option selected>移动电话</option>
					</select>
				</td>
				<td>
					<input type="text" size="2px" placeholder="086"><span>-</span>
					<input type="text" placeholder="手机号"></td>
				<td>
					<u>添加联系方式</u>
				</td>
			</tr>
			<tr>
				<td>地址</td>
				<td>
					<input type="text">
				</td>
			</tr>
			<tr>
				<td>
					<span>邮编</span>
				</td>
				<td><input type="text" size="4px"></td>
				<td>
					<font color="coral">
						地址和邮政编码请同时填写(香港:000000)</font>
				</td>
			</tr>

			<tr>
				<td>在线联系</td>
			</tr>
			<tr>
				<td>旺旺(淘宝版)ID</td>
				<td>
					<input type="text"></td>
				<td>
					<font color="coral">留下旺旺(淘宝版)ID可以方便企业在线联系你</font>
				</td>
			</tr>
			<tr>
				<!-- <td><hr style="border:1px dashed #000" /></td> -->
			</tr>
			<tr>
				<td><strong>求职意向</strong></td>
			</tr>
			<tr>
				<td>工作类型</td>
				<td>
					<select>
						<option value="" selected>全职</option>
						<option value="">兼职</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<span>地点</span>
				</td>
				<td>
					<select multiple="multiple">
						<option value="">选择/修改</option>
					</select>(可多选,最多5项)
				</td>
			<tr>
				<td>
					<span>行业</span></td>
				<td>
					<select multiple="multiple">
						<option value="">选择/修改</option>
					</select>(可多选,最多5项)
				</td>
			</tr>
			<tr>
				<td>
					<span>职能</span>
				</td>
				<td>
					<select multiple="multiple">
						<option value="">选择/修改</option>
					</select>(可多选,最多5项)
				</td>
			</tr>
			<tr>
				<td>
					<span>工资</span>
				</td>
				<td>
					<select>
						<option value="">面议</option>
					</select>/月
				</td>
			</tr>
			<tr>
				<td>
					<!-- <hr style="border:1px dashed #000;" /> -->
				</td>
			</tr>
			<!-- <tr>
				<td>请在输入框中输入您对自己的评价,字数在150字以内。</td>
			</tr>
			<tr>
				<td>
				请简明扼要的说明您最大的优势是什么,避免使用一些空洞、老套的话。
				示例一:?范例二:?</td>
			<tr>
				<td colspan="2">
			<textarea cols="180" rows="6"></textarea></td>
			</tr>
			<tr> -->
			<td colspan="3">
				<center><button type="button"
						style="background-color: orange;border-radius: 20%;box-shadow:white;width: 80px;height:40px;color:white">上一步</button>
					<button type="button"
						style="background-color: orange;border-radius: 20%;box-shadow:white;width: 80px;height:40px;color:white">下一步</button>
				</center>
			</td>
			</tr>
		</form>
	</table>
</body>

</html>

 

Released eight original articles · won praise 2 · Views 146

Guess you like

Origin blog.csdn.net/qq_43327962/article/details/104902844