设计师学习HTML/CSS之路-05

不了解前端的UI不是好美工，以下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!

第5章 与浏览者交互，表单标签

5-1 使用表单标签form，与用户交互

表单可以把用户输入的数据传输到服务器，这样服务器端程序就可以处理表单传过来的数据。

语法：

<form method="传送方式" action="服务器文件"> </form>

讲解：

<form>标签是成对出现，以<form>开始，以</form>结束。

<method>数据传输方式 (get/post)

<action>数据被传输到的地方，比如一个PHP页面(save.php)

<form method="post" action="save.php>
<label for="username">账号：</label>
<input type="text" name="username" id="username" value="" />
<label for="password">密码：</label>
<input type="password" name="password" id="pass" value="" />

<input type="submit" value="确定" name="submit"/>
<input type="reset" value="重置" name="reset" />
</form>

<form method="post" action="save.php>
 <label for="username">账号：</label>
  <input type="text" name="username" id="username" value="" />
 <label for="password">密码：</label>
  <input type="password" name="password" id="pass" value="" /><br>
 <input type="submit" value="确定" name="submit"/>
  <input type="reset" value="重置" name="reset" />
</form>

<所有表单控件都必须在<form></form>之间。

5-2 文本输入框、密码输入框

语法：
<form>
 <input type="text/password" name="文本框的后台名" value="文本框提示默认值"/>
</form>

例如：
<form>
姓名：<input type="text" name="myName">

密码：<input type="password" name="pass">
</form>

<form>
姓名：<input type="text" name="myName"><br>
密码：<input type="password" name="pass">
</form>

5-3文本域，支持多行文本输入

当用户需要在表单中输入大量文本时，需要用到文本输入域。

语法：

<textarea rows="行数" cols="列数">输入文本</textarea>

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、rows ：多行输入域的行数。

3、cols ：多行输入域的列数。

4、在<textarea></textarea>标签之间可以输入默认值。

例：
<form method="post" action="save.php">
<label>反馈：</label>
<textarea rows="3" cols="50">输入内容...</textarea>
</form>

<form method="post" action="save.php">
 <label>反馈：</label> 
 <textarea rows="3" cols="50">输入内容...</textarea>
</form>

5-4 使用单选框、复选框，让用户选择

语法：

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

1、type: 当 type="radio" 时，控件为单选框

            当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用。 同一组选项，name值必须一致

4、checked：当设置 checked="checked" 时，该选项被默认选中

例：
<form method="post" action="save.php">
<label>你的年收入是：</label>

<input type="radio" value="5-10万" name="salary" checked="checked" />5-10万
<input type="radio" value="11-20万" name="salary" />11-20万
<input type="radio" value="20万以上" name="salary" />20万以上
</form>

<form method="post" action="save.php">
 <label>你的年收入是：</label><br>
  <input type="radio" value="5-10万" name="salary" checked="checked" />5-10万
  <input type="radio" value="11-20万" name="salary"  />11-20万
  <input type="radio" value="20万以上" name="salary"  />20万以上
</form>

<form method="post" action="save.php">
<label>你的常用软件是：</label>

<input type="checkbox" value="PS" name="skill" checked="checked" />PS
<input type="checkbox" value="Sketch" name="skill" />Sketch
<input type="checkbox" value="AI" name="skill" />AI
</form>

<form method="post" action="save.php">
 <label>你的常用软件是：</label><br>
  <input type="checkbox" value="PS" name="skill" checked="checked" />PS
  <input type="checkbox" value="Sketch" name="skill"  />Sketch
  <input type="checkbox" value="AI" name="skill"  />AI
</form>

5-5 使用下拉列表框，节省空间

语法：

<form>
 <label>请选择</label>
   <select>
      <option value="1">A</option>
      <option value="2" selected="selected">B</option>
      <option value="3">C</option>
   </select>
</form>

<form>
<label>请选择</label>
<select>
<option value="1">A</option>
<option value="2" selected="selected">B</option>
<option value="3">C</option>
</select>
</form>

value="提交的值"，<option>显示的值</option>

5-6 使用下拉列表框进行多选

下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能

语法：
<select multiple="multiple">
      <option value="1">A</option>
      <option value="2" selected="selected">B</option>
      <option value="3">C</option>
</select>

例：
<select multiple="multiple">
<option value="1">A</option>
<option value="2" selected="selected">B</option>
<option value="3">C</option>
</select>

5-7 使用提交按钮，提交数据

语法：

<input type="submit" value="按钮上的文字">

例：
<form method="post" action="save.php">
<label for="myName">姓名：</label>
<input type="text" value="" name="myName"/>
<input type="submit" value="提交" name="submitBtn" />

<form method="post" action="save.php">
<label for="myName">姓名：</label>
<input type="text" value="" name="myName"/>
<input type="submit" value="提交" name="submitBtn" />

5-8 使用重置按钮，重置表单信息

语法：

<input type="reset" value="按钮上的文字">

例：
<form method="post" action="save.php">
<label for="myName">姓名：</label>
<input type="text" value="" name="myName"/>
<input type="submit" value="提交" name="submitBtn" />
<input type="reset" value="重置" name="resetBtn" />
</form>

<form method="post" action="save.php">
<label for="myName">姓名：</label>
<input type="text" value="" name="myName"/>
<input type="submit" value="提交" name="submitBtn" />
<input type="reset" value="重置" name="resetBtn" />
</form>

5-9 form表单中的label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法：

<label for="控件id名称">..</label>

例：
<form>
您的性别：

<label for="male">男</label> 
<input type="radio" id="male" name="sex" checked="checked" />

<label for="female">女</label> 
<input type="radio" id="female" name="sex" />

</form>

<form>
 您的性别：<br>
 <label for="male">男</label>&nbsp;
 <input type="radio" id="male" name="sex" checked="checked" /> <br>
 <label for="female">女</label>&nbsp;
 <input type="radio" id="female" name="sex" /><br>
</form>

label for="属性值"必须和id="属性值"一致。