html表单的作用？
html表单用于浏览器（Brower）向服务端(Server)提交数据时使用。应用场景比如：用户登录，用户注册。
常用的表单元素有哪些？
-
input (根据type属性值的不同，作用也不同)，type常用值如下：
- type= "text" 文本输入域
- type ="password" 密码输入域
- type="checkbox" 复选框
- type="radio" 单选按钮
- type="file" 文件上传
- type="hidden" 隐藏域
- type="button" 按钮（不提交表单信息）
- type="sumbit" 按钮（提交表单信息）
- type="reset" 按钮 （重置表单信息）
-
select （下拉列表）
- 选项值（option）
-
textarea
- 多行文本域
下面通过一个简单的例子来展示如上表单元素的使用
<!DOCTYPE html>
<html lang="zh">
<head>
<title>表单使用介绍</title>
<meta charset="UTF-8">
</head>
<body>
<div class="user_register">
<!-- action: 指定表单内容提交到指定的url method: 指定提交表单数据的方式，常用的两种方式(get/post)-->
<form action="/register" method="post">
<div class="username">
<label for="username">用户名：</label> <!--显示绑定：通过label标签的for属性与指定的表单元素绑定，作用：从而点击此标签的时候相应的作用于指定挂钩的标签-->
<input id="username" name="username" type="text" placeholder="用户名">
</div>
<div class="pwd">
<label for="pwd">密码：</label>
<input id="pwd" name="pwd" type="password" value="12345678">
</div>
<div class="sex">
<!-- 通过name值的相关将radio按钮分为一组-->
性别: <label><input name="sex" type="radio" value="1" checked>男</label> <!--隐式绑定：通过label标签的for属性与指定的表单元素挂钩，作用：从而点击此标签的时候相应的作用于指定挂钩的标签-->
<label><input name="sex" type="radio" value="0">女</label>
</div>
<div class="habby">
爱好: <label><input name="habby" type="checkbox" value="2" checked>看书</label>
<label><input name="habby" type="checkbox" value="4" checked>听歌</label>
<label><input name="habby" type="checkbox" value="6">游泳</label>
</div>
<div class="icon">
<label>头像上传<input name="icon" type="file"><label>
<div>
<div class="birthplace">
<select name="birthplace">
出生地: <option value="2" selected>北京</option>
<option value="4">上海</option>
<option value="6">深圳</option>
</select>
</div>
<div class="other">
<textarea name="other" value="2"></textarea>
</div>
<div class="btn">
<input type="button" value="button">
<input type="submit" value="submit">
<input type="reset" value="reset">
</div>
</form>
</div>
</body>
</html>
效果图如下：
Paste_Image.png
综上就是表单元素基本的使用，本人还在学习阶段，后续还会补充。本文章归饥人谷_nanhai和饥人谷所有，转载须说明来源。
