Html表单和表格例子

来源：互联网发布：linux 精确时间编辑：程序博客网时间：2024/05/17 12:50

Html表格和表单制作：
1.关于表格：
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
跨行：colspan
跨列：rowspan
2.关于表单：
输入
多数情况下被用到的表单标签是输入标签（input）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
单选按钮（Radio Buttons）
复选框（Checkboxes）
表单的动作属性（Action）和确认按钮：
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

表格：

<<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>web2 表格</title></head><body>    <table border="1" width="400" height="100" cellspacing="0" cellpadding="0">     <caption align="center"> <h3> ##IT教育——学生档案</h3> <br/> <h5>  档案编号 XSJY-2016 </h5></caption>  <br/>    <thead>        <th>培训课程</th>        <th>前端开发工程师课程</th>    </thead>    <tbody>        <tr>            <td text align="center"><b>班号</b></td>            <td text align="center"><b> <font color="#f00"> 公司填写</font> </b></td>            <td rowspan="4"> <b>照片</b></td>        </tr>        <tr>            <td text align="center" rowspan="3"><b>填表时间</b></td>        </tr>    </tbody>    </table>    <table border="1" width="400"  cellspacing="0" cellpadding="0">    <thead>        <th>学员姓名</th>        <th></th>        <th>性别</th>        <th></th>        <th width="50">出生日期</th>        <th></th>    </thead>    <tbody>    <tr>    <td rowspan="2"> <b>目前从事职位或上学</b></td>    <td rowspan="2" width="50">  </td>    <td rowspan="2"> <b>学历</b></td>    <td rowspan="2" width="50"></td>    <td><b> <font color="#f00"> QQ号码</font> </b></td>    <td  width="50"></td>    </tr>    <tr>    <td><b> <font color="#f00"> YY号码</font> </b></td>    <td  width="50"></td>    </tr>    <tr>    <td><b>手机</b></td>    <td colspan="5"> </td>    </tr>    <tr>    <td><b>证件名称 </b></td>    <td><b> 身份证</b></td>    <td><b> 证件前十四位号码</b></td>    <td colspan="3"></td>    </tr>    <tr>    <td><b> 目前工作城市 </b></td>    <td colspan="5"></td>    </tr>    <tr>    <td><b> 毕业院校</b></td>    <td colspan="5"></td>    </tr>       <tr>    <td><b> 目前从事岗位</b></td>    <td colspan="5"></td>    </tr>    <tr>    <td><b> 毕业院校</b></td>    <td colspan="5"></td>    </tr>    <tr>    <td><b> 你是从那里知道##的</b></td>    <td colspan="5"></td>    </tr>    <tr>    <td><b> ##哪方面吸引了你</b></td>    <td colspan="5"></td>    </tr>    <tr>    <td><b> 序号</b></td>    <td text align="center" colspan="2"><b> 缴费金额</b></td>    <td><b> 缴费日期 </b></td>    <td><b> 收款人</b></td>    <td><b> 咨询老师</b></td>    </tr>    <tr>    <td><b> 1</b></td>    <td colspan="2"></td>    <td></td>    <td><b> <font color="#f00"> 公司填写</font> </b></td>    <td><b> <font color="#f00"> 公司填写</font> </b></td>    </tr>    </tbody>    </body></html>

浏览器打开如图所示：
这里写图片描述

表单：

<<!DOCTYPE html><html lang="en"><html><head>     <meta charset="UTF-8">    <title><b>  基本资料</b></title></head><body> <h3>基本资料</h3><form action="html5.html" method="get">性别: <input type="radio" name="sex" value="1">男    <input type="radio" name="sex" value="0">女    <br/>生日:<select name="year" >                         <option value="0">年</option>                        <option value="1">1980</option>                        <option value="2">1981</option>                        <option value="3">1982</option>                        <option value="4">1983</option>                        <option value="5">1984</option>                        <option value="6">1985</option>                        <option value="7">1986</option>                        <option value="8">1987</option>                        <option value="9">1988</option>                        <option value="10">1989</option>                         <option value="11">1990</option>                        <option value="12">1991</option>                        <option value="13">1992</option>                        <option value="14">1993</option>                        <option value="15">1994</option>                        <option value="16">1995</option>                        <option value="17">1996</option>                        <option value="18">1997</option>                        <option value="19">1998</option>                        <option value="20">1999</option>            </select>            <select name="month"  >                        <option value="1">月</option>                        <option value="2">1</option>                        <option value="3">2</option>                        <option value="4">3</option>                        <option value="5">4</option>                        <option value="6">5</option>                        <option value="7">6</option>                        <option value="8">7</option>                        <option value="9">8</option>                        <option value="10">9</option>                         <option value="11">10</option>                        <option value="12">11</option>                        <option value="13">12</option>               </select>                <br />血型:<select name="blood">                        <option value="1">未知</option>                        <option value="1">A</option>                        <option value="2">B</option>                        <option value="3">AB</option>                        <option value="4">O</option>                        <option value="5">RH</option>                  </select>                <br /> 出生地:<select name="省份" >                        <option value="0">请选择</option>                        <option value="1">北京</option>                        <option value="2">上海</option>                        <option value="3">广东</option>                         <option value="4">天津</option>                        <option value="5">江苏</option>                        <option value="6">浙江</option>                         <option value="7">湖南</option>                        <option value="8">湖北</option>                        <option value="9">山东</option>                         <option value="10">陕西</option>                        <option value="11">山西</option>                        <option value="12">广西</option>                    </select>           <select name="city" >                         <option value="0">请选择</option>                         <option value="1">北京</option>                        <option value="2">上海</option>                        <option value="3">广州</option>                        <option value="4">深圳</option>             </select>                <br /> 居住地:<select name="city">                           <option value="0">请选择</option>                        <option value="1">北京</option>                        <option value="2">上海</option>                        <option value="3">广东</option>                         <option value="4">天津</option>                        <option value="5">江苏</option>                        <option value="6">浙江</option>                         <option value="7">湖南</option>                        <option value="8">湖北</option>                        <option value="9">山东</option>                         <option value="10">陕西</option>                        <option value="11">山西</option>                        <option value="12">广西</option>                    </select>           <select name="city" placeholder="请选择"required />                        <option value="0">请选择</option>                         <option value="1">北京</option>                        <option value="2">上海</option>                        <option value="3">广州</option>                        <option value="4">深圳</option>             </select>                <br />                 个人简介:<textarea name="text" rows="5" cols="30"></textarea>                <br/>                <input type="submit" color="#abcdef" value="保存"></body></html>

这里写图片描述

0 0