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>