HTML+CSS基础篇(二)——表单标签，与浏览器交互

本文链接：https://blog.csdn.net/mqy1023/article/details/50831883

一、使用表单标签，与用户交互
网站使用HTML表单(form)与用户交互。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：
<form   method="传送方式"   action="服务器文件">
讲解：
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post）
<form method="post" action = "save.php">
      <label for="username" style = "float : left; margin-top : 0px ;">用户名:</label>
      <input type="text"  name="username" id="username" value="" /><br><br>
      <label for="pass" style = "float : left; margin-right :8px;">密&nbsp;码:</label>
      <input type="password"  name="pass" id="pass" value="" />    <br><br>
      <input type="submit" value="确定"  name="submit" />
      <input type="reset" value="重置" name="reset" />
</form>  
二、文本输入框、密码输入框
<form>
   <input type="text/password" name="名称" value="文本" />
</form>
1、type：
   当type="text"时，输入框为文本输入框;
   当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
三、文本域，支持多行文本输入
<textarea  rows="行数" cols="列数">文本</textarea>
四、单选框、复选框
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
1、type:
   当 type="radio" 时，控件为单选框
   当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用【同一组radio/checkbox需name属性相同】
4、checked：当设置 checked="checked" 时，该选项被默认选中

五、下拉列表框
1、默认单选
<option value="向服务器提交的值"  selected="selected">显示的值</option>
<select>
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
</select>
2、多选(需Ctrl键同时进行单击来选择)
<select multiple="multiple">
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
</select>
五、表单中的label标签
<label for="控件id名称">
如果你在 label 标签内点击文本，就会触发此控件
<label for="emailid">输入你的邮箱地址</label>
<input type="email" id="emailid" placeholder="Enter email">

html5新<datalist>标签

可以制作出输入值的下拉列表。当input输入框里输入信息和备选列表相同时，自动显示智能感应

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

来源：http://www.imooc.com/learn/9