美文网首页
Html + css基础课程学习笔记(2)

Html + css基础课程学习笔记(2)

作者: QianqianLis | 来源:发表于2016-05-31 10:10 被阅读31次

表单标签

浏览器用户输入的数据,以表单的形式,传送到服务器端。

<!-- <form   method="传送方式"   action="服务器文件">  -->
<form method="post" action="save.php">
      <label for="username">用户名:</label>
      <input type="text"  name="username" id="username" value="" />
      <label for="pass">密码:</label>
      <input type="password"  name="pass" id="pass" value="" />    
      <input type="submit" value="确定"  name="submit" />
      <input type="reset" value="重置" name="reset" />
</form>  

注意:
1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间(否则用户输入的信息可提交不到服务器上哦!)。

输入框

<!--  <input type="text/password" name="名称" value="文本默认值" /> -->
<form  method="post" action="save.php">
    账户: 
    <input type="text" name="myName" />
    <br>
    密码: 
    <input type="password" name="pass" />
</form> 

多行文本

<!-- <textarea rows="行数" cols="列数">文本</textarea>  -->
<form action="save.php" method="post" >
    <label>个人简介:</label>
    <textarea cols="50" rows="10">在这里输入内容...</textarea>
    <input type="submit" value="确定"  name="submit" />
    <input type="reset" value="重置"  name="reset" />
</form> 

单选框、复选框

<!--  <input type="radio/checkbox" value="值" name="名称" checked="checked"/> -->
<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender" />
    <label>女</label>
    <input type="radio" value="2"  name="gender" />
</form>

注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

下拉列表

<select>
  <option value="向服务器提交的值">显示的值</option>
</select>
<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>

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

多选

<!-- <select multiple="multiple">  -->
<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>

<select>标签中设置multiple="multiple"
属性,就可以实现多选功能

提交按钮

用于提交表单信息到服务器

<!-- <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>

type:只有当type值设置为submit时,按钮才有提交作用

重置按钮

<!-- <input **type="reset"** value="重置"> -->
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
    <input type="submit" value="确定"  />
    <input type="reset" value="重置"  />
</form>

label标签

当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上

<!-- <label for="控件id名称"> -->
<form>
   <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <br />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
  
</form>

注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

相关文章

网友评论

      本文标题:Html + css基础课程学习笔记(2)

      本文链接:https://www.haomeiwen.com/subject/cugqdttx.html