做了一个表单，是在VSCode里写的
应用的表单元素
单行输入框—input
单选按钮------radio
下拉框---------select
多选按钮------checkbox
文本域---------textarea
上传文件------input type=“file”
元素说明
div是块级元素，自动换行
span标签被用来组合文档中的行内元素，通过样式来格式化它们。
option 元素定义下拉列表中的一个选项（一个条目），代码在年月日里写的比较多一点
h3元素是定义标题，可添加自己想表达的内容
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单</title>
<style>
h3 {
text-align: center;
}
.container{
width: 40%;
margin: 20px auto; /* 设置外边距属性 */
}
.com{
width:230px;
height: 30px;
}
span{
display:inline-block;/* 定义为行内块元素 */
width: 150px;
text-align: right;/* 文本对齐方式 */
}
div{
margin-bottom: 10px;
}
select {
height: 30px;
}
/* #show{
width: 300px;
height: 300px;
margin: 10px 160px;
} */
</style>
</head>
<body>
<h1>form表单案例</h1>
<form action="" οnsubmit="return check()" class="container">
<h3>时光不老，我们不散</h3>
<div>
<span>用户名：</span>
<input type="text" class="com" />
</div>
<div>
<span>昵称：</span>
<input type="text" class="com" />
</div>
<div>
<span>性别：</span>
<!-- radio是单选按钮，checked是打勾的意思 -->
<input id="male" type="radio" name="sex" value="1" checked="checked"/>
<label for="male">男</label>
<input id="female" type="radio" name="sex" value="2" />
<label for="female">女</label>
<input id="other" type="radio" name="sex" value="3" />
<label for="other">保密</label>
<!-- <input id="other" type="radio" name="sex" value="3" disabled="disabled" />
<label for="other">保密</label> -->
</div>
<div>
<span>生日：</span>
<!-- select是下拉框，option是选项 -->
<select name="year">
<option selected value="null">请选择年</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
<select name="month">
<option selected value="null">请选择月</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="day">
<option selected value="null">请选择日</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div>
<span>地区：</span>
<select name="address" class="com">
<option selected value="null">请选择地区</option>
<option value="1">湖南</option>
<option value="2">河南</option>
<option value="3">河北</option>
<option value="4">湖北</option>
<option value="6">上海</option>
<option value="7">广东</option>
<option value="8">山东</option>
<option value="9">福建</option>
<option value="10">浙江</option>
</select>
</div>
<div>
<span>手机号：</span>
<!-- required告诉浏览器必须提交正确的字段才提交表单，placeholder提示字段应该填什么数据 -->
<input value="" class="com" required maxlength="11" name="phone" placeholder="请输入手机号" />
</div>
<!-- 传输文件 -->
<div>
<span>晒出美照</span>
<!-- type="file"代表上传文件 -->
<input
type="file"
id="file"
accept="image/png, image/jpeg, image/gif, image/jpg"
name="img"
οnchange="handleFile(this)"
/>
<img id="show"/>
</div>
<div>
<span>喜欢的类型：</span>
<label for="handsome">英俊</label>
<input id="handsome" type="checkbox" value="1" />
<label for="talented">有才</label>
<input id="talented" type="checkbox" value="2" />
<label for="sweet">温柔</label>
<input id="sweet" type="checkbox" value="3" />
<label for="both">我都要</label>
<input id="both" type="checkbox" value="4" />
</div>
<div>
<span>自我介绍：</span>
<textarea class="com" maxlength="100"></textarea>
</div>
<div>
<span></span>
<!-- checkbox多选按钮 -->
<input type="checkbox" id="agree" name="agree" /> 我同意注册条款
<!-- 按提交会在网址栏显示信息（默认是get提交 在form的属性中设置） -->
<button>提交</button>
</div>
</form>
</body>
<script>
function handleFile(e){
//dir比log输出的东西更详细
console.dir(e);
//js封装好的对象，文件上传并读取文件
let reads = new FileReader();
let f = e.files[0];
//转格式
reads.readAsDataURL(f);
reads.onload = function(e){
document.getElementById('show').src = this.result;
}
}
function check(){
let check = document.getElementById('agree');
if(check.checked){
return true;
}else{
alert("请勾选已同意注册条款!")
return false;
}
}
</script>
</html>
表单效果图（h1元素里的标题没截）
1318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
