用html实现最基本的表单制作

爱吃水果的兔子

已于 2023-08-12 14:47:03 修改

阅读量129

点赞数 2

文章标签： html 前端 javascript

于 2023-08-12 12:34:22 首次发布

本文链接：https://blog.csdn.net/2202_75879208/article/details/132247340

版权

例图如下：

1.提示要写内容

2.可以选择日期，颜色等

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
background-color: rgb(168, 200, 196);
opacity: 0.7;
}
</style>
</head>
<body>
<form action="">
<table width="600" border="1">
<tr>
<td colspan="2" style="text-align: center; font-weight: 700;">个人信息</td>
</tr>
<td>姓名：</td>
<td><input type="text" required="required" autofocus="autofocus" autocomplete="off"></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" id="nan"><label for="nan">男 </label>
<input type="radio" name="sex" id="nv"><label for="nv">女 </label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<input type="date" required="required">
</td>
</tr>
<tr>
<td>手机号</td>
<td>
<input type="tel" required="required">
</td>
</tr>
<tr>
<td>民族</td>
<td>
<select value="请选择....." required="required">
<option checked="checked">汉族</option>
<option>蒙古族</option>
<option>回族</option>
<option>藏族</option>
<option>苗族</option>
<option>满族</option>
<option>壮族</option>
<option>朝鲜族</option>
<option>其他</option>
</select>
</td>
</tr>
<tr>
<td>地区</td>
<td>
<input type="text" required="required">
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox">爬山<input type="checkbox">唱歌<input type="checkbox">跳舞<input
type="checkbox">台球<input type="checkbox">游戏<input type="checkbox">其他
</td>
</tr>
<tr>
<td>喜欢颜色</td>
<td>
<input type="color">
</td>
</tr>
<tr>
<td>日志</td>
<td>
<textarea name="jieshao" id="" cols="30" rows="10"
style="resize: none;text-indent: 2em;"></textarea>
</td>
</tr>
<tr>
<td>免费注册</td>
<td><input type="submit" value="提交" style="margin-left:200px;"></td>
</tr>
<tr>
<td></td>
<td><input type="reset" value="重新填写" style="margin-left:190px;"></td>
</tr>
</table>
</form>
</body>
</html>