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

表单标签

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

<!-- <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 属性值一定要相同。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、HTML介绍 1 2、Html和CSS的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户...
    夏沫xx阅读 1,503评论 0 8
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,408评论 1 41
  • 引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完...
    张文靖同学阅读 2,891评论 0 11
  • 原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...
    任凱阅读 1,427评论 0 5
  • 前言:本文仅作为第一次学习设计模式的参考和笔记。初探观察者模式: 观察者模式:Observer Pattern 又...
    齐舞647阅读 299评论 0 0