html基础2

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

     action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

     method ： 数据传送的方式（get/post）。

<form    method="post"   action="save.php">        <label for="username">用户名:</label>        <input type="text" name="username" />        <label for="pass">密码:</label>        <input type="password" name="pass" /></form>

2、文本框

   当type="text"时，输入框为文本输入框;当type="password"时, 输入框为密码输入框。

   name：为文本框命名，以备后台程序ASP 、PHP使用。

   value：为文本输入框设置默认值。(一般起到提示作用)

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

3、多行文本框

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

   cols ：多行输入域的列数。

   rows ：多行输入域的行数。

<form  method="post" action="save.php">        <label>联系我们</label>        <textarea cols="50" rows="10" >在这里输入内容...</textarea></form>

4、单选框/多选框

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

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

     name：为控件命名，以备后台程序ASP、PHP使用，同一组的单选按钮，name取值一定要一致

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

<form action="save.php" method="post" >    <label>性别:</label>    <label>男</label>    <input type="radio" value="1"  name="sex" />    <label>女</label>    <input type="radio" value="2"  name="sex" /></form>

5、下拉列表框

     设置selected="selected"属性，则该选项就被默认选中。

<form action="save.php" method="post" >    <label>爱好:</label>    <select>      <option value="看书">看书</option>      <option value="旅游" selected="selected">旅游</option>      <option value="运动">运动</option>      <option value="购物">购物</option>    </select></form>

    在<select>标签中设置multiple="multiple"属性，按下ctrl就可以实现多选功能

<form action="save.php" method="post" >    <label>爱好:</label>    <select multiple="multiple">      <option value="看书">看书</option>      <option value="旅游">旅游</option>      <option value="运动">运动</option>      <option value="购物">购物</option>    </select></form>

6、按钮

提交按钮type为submit

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

重置按钮reset

<input type="reset" value="重置"  />

7、form中的label for，当点击标签时，直接定位到相关表单控件上，注意标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

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

<form>  <label for="male">男</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">女</label>  <input type="radio" name="sex" id="female" />  <label for="email">输入你的邮箱地址</label>  <input type="email" id="email" placeholder="Enter email"></form>