实训第三天

HTML表格与表单

先奉上知识一览

 


表格

简单介绍


常用标签:

  • <tr> 定义表格的行
  • <td>定义表格的单元
  • <th>定义表格的表头
  • <caption>定义表格标题

其他标签:

  • <thead>定义表格的页眉
  • <tbody>定义表格的主体
  • <tfoot>定义表格的页脚
  • <col>定义用于表格列的属性
  • <colgroup>定义表格列的组

属性:

  • colspan  横跨列
  • rowspan   横跨行
  • border  规定表格边框的宽度
  • cellpadding  规定单元边沿与其内容之间的空白
  • cellspacing  规定单元格之间的空白
  • width  规定表格的宽度

表格数据(table data),即数据单元格的内容含文本、图片、列表、段落、表单、水平线、表格等

 

部分实例


  • <tr> 定义表格的行
  • <td>定义表格的单元
    <table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

结果:

 

  • <th>定义表格的表头
    <table border="1"> 
        <tr>
            <th>第一节</th>
            <th>第二节</th>
        </tr>
        <tr>
            <td>数</td>
            <td>语</td>
        </tr>
        <tr>
            <td>英</td>
            <td>政</td>
        </tr>
    </table>

结果:

 

  • <caption>定义表格标题
     
    <table border="1">
        <caption>课程表</caption>
        <tr>
            <th>星期一</th>
            <th>星期二</th>
        </tr>
        <tr>
            <td>数</td>
            <td>语</td>
        </tr>
        <tr>
            <td>英</td>
            <td>政</td>
        </tr>
    </table>

结果:

 

  • colspan  横跨列
    <table border="1"> 
        <tr>
            <th>星期一</th>
            <th>星期二</th>
        </tr>
        <tr>
            <td>数</td>
            <td>语</td>
        </tr>
        <tr>
            <td colspan="2">英</td>
        </tr>
    </table>

结果:

 

  • rowspan   横跨行
    <table border="1"> 
        <tr>
            <th>星期一</th>
            <th>星期二</th>
        </tr>
        <tr>
            <td rowspan="2">英</td>
            <td>数</td>
        </tr>
        <tr>
            <td>政</td>
        </tr>
    </table>

结果:

 

  • border  规定表格边框的宽度(与上面代码比较)
    <table border="10"> 
        <tr>
            <th>星期一</th>
            <th>星期二</th>
        </tr>
        <tr>
            <td rowspan="2">英</td>
            <td>数</td>
        </tr>
        <tr>
            <td>政</td>
        </tr>
    </table>

结果:

 

  • cellpadding  规定单元边沿与其内容之间的空白
    <table border="1">
        <tr>
          <td>数</td>
          <td>语</td>
        </tr>   
        <tr>
          <td>英</td>
          <td>政</td>
        </tr>
    </table>
        
    <h5>cellpadding:</h5>
    <table border="1" 
        cellpadding="10">
        <tr>
          <td>数</td>
          <td>语</td>
        </tr>   
        <tr>
          <td>英</td>
          <td>政</td>
        </tr>
    </table>

结果:

 

  • cellspacing  规定单元格之间的空白
    <h4>没有 cellspacing:</h4>
    <table border="1">
        <tr>
            <td>数</td>
            <td>语</td>
        </tr>   
        <tr>
            <td>英</td>
            <td>政</td>
        </tr>
    </table>
    
    <h4>有 cellspacing:</h4>
    <table border="1" cellspacing="10">
        <tr>
            <td>数</td>
            <td>语</td>
        </tr>   
        <tr>
            <td>英</td>
            <td>政</td>
        </tr>
    </table>

结果:


 

表单

简单介绍


常用标签:

<input>

  • 文本输入 type=“text”:定义常规文本输入
  • 单选框 type=“radio”:定义单选按钮输入(选择多个选择之一)
  • 提交按钮:type=“submit”
  • 重置按钮 type=“reset”
  • 按钮 type=“button”  没有默认的行为,但是必须有一个onclick事件句柄以便使用
  • 复选框 type=“checkbox”
  • 密码输入 type=“password”
  • 邮箱 type="email"
  • 日期选择框 type="data"
  • 月份选择框 type="mouth"
  • 颜色选择器 type="color"
  • 数字选择框 type="number"
  • 隐藏域标识(不显示在浏览器中) type=“hidden”

<button>

  • 提交按钮:type=“submit”
  • 重置按钮 type=“reset”
  • 按钮 type=“button”  没有默认的行为,但是必须有一个onclick事件句柄以便使用

<select>

  • <select>......</select>
  • <option></option>定义下拉选项

<textarea>

  • <textarea>......</textarea>
  • cols 列数(文本区宽度)
  • rows 行数(文本区高度)

 

 

部分属性

  • Action:定义在提交表单时执行的动作;表示提交服务器的地址,跳转页面。如果省略action  属性,则action会被设置为当前页面
  • Method:设置提交表单的方式,规定在提交表单时所用的HTTP方法(GET或POST)。(1)当您使用 GET 时,表单数据在页面地址栏中是可见的;GET 最适合少量数据的提交。浏览器会设定容量限制;请求安全性没有post高。(2)POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。例如:正在更新数据,或者敏感信息(密码)没有。请求参数长度限制。
  • readonly:只读标识;不可输入内容;disabled:禁用标识;不可输入内容                         区别:只读元素值(value)会提交到服务端,而禁用值不会提交到服务端

 

注意:

input(button)和button(button)的区别:input不能嵌入其他图片之类的标签;button可以嵌套

 

 

部分实例

 

input

  • 文本输入 type=“text”:定义常规文本输入
    <form>
        姓名:<br>
       <input type="text" name="name">
       <br>
        年龄:<br>
       <input type="text" name="age">
    </form> 

结果:

 

  • 密码输入 type=“password”
    <form>
        User name:<br>
       <input type="text" name="username">
       <br>
        User password:<br>
       <input type="password" name="password">
    </form> 

结果:

 

 

  • 单选框 type=“radio”:定义单选按钮输入(选择多个选择之一)
    <form>
        <input type="radio" name="sex" value="男" checked>Male
        <!-- checked 表示设置为默认选中状态 -->
        <br>
        <input type="radio" name="sex" value="女">Female
    </form>

结果:

 

 

  • 提交按钮:type=“submit”
    <form action="action_page.php">
        姓名:<br>
        <input type="text" name="name" value="zy">
        <br>
        年龄:<br>
        <input type="text" name="age" value="21">
        <br><br>
        <input type="submit" value="Submit">
    </form> 

结果:

 

 

  • 复选框 type=“checkbox”
    <form>
        <input type="checkbox" name="grade" value="100">我得了100分
        <br>
        <input type="checkbox" name="grade" value="92">我得了92分
    </form> 

结果:

 

 

  • 按钮 type=“button”  没有默认的行为,但是必须有一个onclick事件句柄以便使用
    <form>
        <input type="button" onclick="alert('Hello World!')" value="Click Me!">
    </form> 

结果:

 

 

  • 数字选择框 type="number"
    <form>
        Quantity (between 1 and 5):
        <input type="number" name="quantity" min="1" max="5">
      </form>

结果:

 

 

  • 日期选择框 type="data"
    <form>
        Birthday:
        <input type="date" name="Birthday">
    </form>

结果:

 

 

  • 颜色选择器 type="color"
    <form>
        选择你喜欢的颜色:
        <input type="color" name="favcolor">
    </form>

结果:

 

 

  • 月份选择框 type="mouth"
    <form>
        生日 (月份和年份):
        <input type="month" name="bdaymonth">
    </form>

结果:

 

 

  • 邮箱 type="email"
    <form>
        E-mail:
        <input type="email" name="email">
    </form>

结果:

 

 

select

 

  • <select>......</select>
  • <option></option>定义下拉选项
    <form action="action_page.php">
        <select name="学科">
            <option value="math">数学</option>
            <option value="chinese">语文</option>
            <option value="english">英语</option>
            /select>
    </form> 

结果:

 

 

textarea

 

  • <textarea>......</textarea>
  • cols 列数(文本区宽度)
  • rows 行数(文本区高度)
    <form >
        <textarea name="message" rows="10" cols="30">
            学好数理化,走遍天下都不怕
        </textarea>
    </form> 

结果:

 

 

button

    <form >
        <button type="button" onclick="alert('Hello World!')">Click Me!</button>
    </form> 

结果:


 

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值