什么是HTML表单
HTML表单用于收集用户输入,想服务器传输数据,使用<form>
元素来定义一个HTML表单。
表单可以包含input label textarea button select
等元素。
1. form元素
常用属性:
action:提交表单的地址
method:提交表单的方法,一般有get和post两种
<form action="http://www.domainname.com" method="get">
</form>
2.input元素
input元素通过type属性来设置不同的input类型。
2.1文本域
<div class="account">
<label for="username">账户</label>
<input id="username" type="text" name="username" placeholder="请输入账户名">
</div>
效果:2.2密码域
<div class="password">
<label for="password">密码</label>
<input id="password" type="passwordt" name="password" placeholder="请输入密码">
</div>
效果:2.3单选按钮
<div class="gender">
<label>性别</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</div>
效果:2.4复选框
<div class="hobby">
<label>爱好</label>
<input type="checkbox" name="hobby" value="swimming" checked>游泳
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="coding">写程序
</div>
效果:2.5下拉列表
<div class="age">
<label>年龄标签</label>
<select>
<option value="60s">60后</option>
<option value="70s">70后</option>
<option value="80s" selected>80后</option>
<option value="90s">90后</option>
<option value="00s">00后</option>
</select>
</div>
效果:2.6提交按钮
<div class="submit">
<input type="submit" value="提交">
</div>
效果:2.7重置按钮
<div class="reset">
<input type="reset" value="重置">
</div>
效果:2.8隐藏字段
<div class="hidden">
<input type="hidden" name="nationality" value="Chinese">
</div>
效果:隐藏字段对用户是不可见的
2.9上传文件
<div class="file">
<input type="file" name="pic" accept="image/jpeg">
</div>
效果:3、label元素
<div class="lab">
<label for="age">年龄</label>
<input type="text" name="age" id="age" >
</div>
label元素为input标签定义标注,当鼠标选择该标签时,关联的元素控件会获得焦点,需要注意的是for属性的值要和关联元素的id值相同。
4、textarea元素
<div class="comment">
<label>评价</label>
<textarea cols="40" rows="10" placeholder="type in your comment"></textarea>
</div>
效果