html
注：本文内容为本人学习慕课网前端知识时整理摘录，方便后续查阅。具体可访问原链接
1.<form>标签----和浏览器交互
HTML表单(form)是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：
<form method="传送方式" action="服务器文件">
......
</form>
注：
（1）<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
（2）action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
（3）method ： 数据传送的方式（get/post）。
示例：
<body>
<form method="post" action="save.php">
<label for="username">用户名：</label>
<input type="text" name="username" id="username" value="" /><br />
<label for="pass">密码：</label>
<input type="password" name="pass" id="pass" value="" /><br />
<!--<label for="file">选择的文件:</label>-->
<input type="file" name="file" id="file" value="" /><br />
<input type="submit" name="submit" value="确定" />
<input type="reset" name="reset" value="重置" />
</form>
</body>
<form>表单示例
注意:
（1）所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
（2）method : post/get 的区别这一部分内容属于后端程序员考虑的问题。
2.<input>标签----输入框（必须嵌在<form>标签内）
语法：
<form>
<input type="text/password" name="名称" value="文本" />
</form>
解释（input标签的属性）：
（1）type的取值：
raido：单选按钮
checkbox：复选框
file：文件选择框
reset:重置按钮
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽
range 定义带有 slider 控件的数字字段
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值
search 定义用于搜索的文本字段
submit 定义提交按钮。提交按钮向服务器发送数据
text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符
url 定义用于 URL 的文本字段
（2）name：为文本框命名，以备后台程序ASP 、PHP使用。
（3）value：为文本输入框设置默认值。(一般起到提示作用)
value="xxx" 现在用的比较少了？感觉 placeholder="xxx" 的体验更好一些。
3.<textaera>标签----多行文本输入（必须嵌在<form>标签内）
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法：
<textarea rows="行数" cols="列数" **placeholder="xxx"**>
文本
</textarea>
讲解：
（1）<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
（2）cols ：多行输入域的列数。
（3）rows ：多行输入域的行数。
注意：
cols 和rows这两个属性可用css样式的width和height来代替设置。
（4）在<textarea></textarea>标签之间可以输入默认值。感觉在属性中使用placeholder="xxx"提示文本更好
举例：
<form action="save.php" method="post" >
<label for="resume">个人简介：</label>
<textarea name="resume" id="resume" rows="4" cols="50" placeholder="在这里输入内容..."></textarea>
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
<textarea>标签placeholder示例
4.<input>标签type属性值设为radio或checkbox----单选框、复选框，让用户选择
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
讲解：
（1）type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
（2）value：提交数据到服务器的值（后台程序PHP使用）
（3）name：为控件命名，以备后台程序 ASP、PHP 使用
（4）checked：当设置 checked="checked" 时，该选项被默认选中
举例：
<form name="iForm" method="post" action="save.php">
你是否喜欢旅游？<br />
<input type="radio" name="radioLove" value="喜欢" checked="checked"/>喜欢
<input type="radio" name="radioLove" value="不喜欢"/>不喜欢
<input type="radio" name="radioLove" value="无所谓"/>无所谓
<br/><br />
你对哪些运动感兴趣？<br />
<input type="checkbox" name="checkbox1" value="跑步" />跑步
<input type="checkbox" name="checkbox2" value="打球" checked="checked"/>打球
<input type="checkbox" name="checkbox3" value="登山" checked="checked"/>登山
<input type="checkbox" name="checkbox4" value="健美" />健美
</form>
单选与复选示例
注意:
同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
5.<option>标签----设置下拉菜单，节省空间（放在<form>标签下的<select>标签下）
<form name="iForm" method="post" action="save.php">
<label for="hobby">爱好: </label>
<select name="hobby" id="hobby">
<option value="读书">读书</option>
<option value="运动">运动</option>
<option value="音乐" selected="selected">音乐</option>
<option value="旅游">旅游</option>
<option value="购物">购物</option>
</select>
</form>
讲解：
（1）value：
<select>标签中的value
（2）selected="selected"：
设置selected="selected"属性，则该选项就被默认选中。在浏览器中显示的结果：
不点下拉钮，默认就是selected的值
6.下拉列表实现多选----基本没人用，太傻X了
下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。如下代码：
<form name="iForm" method="post" action="save.php">
<label for="hobby">爱好: </label>
<select name="hobby" id="hobby" multiple="multiple">
<option value="读书">读书</option>
<option value="运动">运动</option>
<option value="音乐" selected="selected">音乐</option>
<option value="旅游">旅游</option>
<option value="购物">购物</option>
</select>
</form>
<select>标签实现多选
7.使用提交按钮，提交数据（<input type="submit" >）
在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。
语法：
<input type="submit" value="提交">
说明：
（1）type：只有当type值设置为submit时，按钮才有提交作用
（2）value：按钮上显示的文字
8.使用重置按钮，重置表单信息（<input type="reset">）
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
语法：
<input type="reset" value="重置">
说明：
（1）type：只有当type值设置为reset时，按钮才有重置作用
（2）value：按钮上显示的文字
9.form表单中的<label>标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
示例：
<form action="save.php" method="post">
<lable>性别：</lable>
<label for="male">男</label>
<input type="radio" name="gender" id="male" checked="checked" />
<label for="female">女</label>
<input type="radio" name="gender" id="female" /><br />
<label for="email">请输入邮箱：</label>
<input type="email" id="email" placeholder="Enter email" /><br />
<label>你对什么运动感兴趣：</label><br />
<label for="jogging">慢跑</label>
<input type="checkbox" name="hobby" id="jogging" checked="checked" /><br />
<label for="climbing">登山</label>
<input type="checkbox" name="hobby" id="climbing" /><br />
<label for="basketball">篮球</label>
<input type="checkbox" name="hobby" id="basketball" /><br />
</form>
<label>标签作用示例
阿里云推广：
通用代金券领取链接：https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=qtyyc38p
优惠链接：（总有一款适合你）
1）【开年HI购季】爆款云产品5折：https://www.aliyun.com/acts/product-section-2019/new-users?userCode=qtyyc38p
2）【助力企业上云】性能级主机2-5折：https://promotion.aliyun.com/ntms/act/enterprise-discount.html?userCode=qtyyc38p
3）【全民云计算】云主机低至2折：https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=qtyyc38p
4）【商标注册服务】低至300元：https://tm.aliyun.com/?userCode=qtyyc38p
5）【超高返现】购物车全产品返25%：https://promotion.aliyun.com/ntms/act/shoppingcart.html?userCode=qtyyc38p
6）【阿里云自营建站】买一年送一年：https://www.aliyun.com/jianzhan/?userCode=qtyyc38p
网友评论