Html表单和表格例子

标签: html  表单

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>

这里写图片描述

版权声明:本文为boke14122621原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/boke14122621/article/details/70896504

智能推荐

[学习记录,]Mybatis入门

环境: Eclipse 2019 Tomcat 9.0 jdk1.8 开搞 首先创建工程 结构如下 导入Jar包 可在mybatis官网下载 http://www.mybatis.cn/82.html 配置文件mybatis-config.xml 事务管理有两种:JDBC和MANAGED JDBC: MANAGED 数据源类型:UNPOOLED、POOLED、JNDI 创建实体类文件User.ja...

运用for语句来判断数组中值得大小

总结: 1将if语句与数组联合起来判断输入中各组中的最大最小值; 2注意:定义的数组数量是躲多少就要输入多少组数据,少输入就无法输出;...

Bridging signals

Bridging signals Time Limit: 1000MSMemory Limit: 10000K Total Submissions: 10926Accepted: 5982 Description 'Oh no, they've done it again', cries the chief designer at the Waferland chip factory. Once ...

一天一大 leet

一天一大 leet 题目(难度:困难): 示例 抛砖引玉 官方答案 高手在民间 菜鸡的自白 20200606 题目(难度:困难): 给定一个未排序的整数数组,找出最长连续序列的长度。 要求算法的时间复杂度为 O(n)。 示例 示例 抛砖引玉 要求算法的时间复杂度为 O(n),即限制了只能循环一次; 先对数组排序 循环数组记录后一个元素等于前一个元素+1或者等于前一个元素的数量 满足条件++,不然重...

Tensorflow实现的CNN文本分类

https://blog.csdn.net/somtian/article/details/69359498 原博文, github 在这篇文章中,我们将实现一个类似于Kim Yoon的卷积神经网络语句分类的模型。 本文提出的模型在一系列文本分类任务(如情感分析)中实现了良好的分类性能,并已成为新的文本分类架构的标准基准。 本文假设你已经熟悉了应用于NLP的卷积神经网络的基础知识。 如果没有,建议...

猜你喜欢

JDBC新手入门教程

开发工具:idea 数据库:mysql jar包:junit-4.10 mysql-connector-java-8.0.18 junit-4.10下载 mysql-connector-java-8.0.18下载 注意1:jdbc的驱动因为使用的是mysql-connector-java-8.0.18,所以为(“com.mysql.cj.jdbc.Driver”),而不是(...

Lua 排序 table.sort

    正如C#中有Array.Sort(),lua中也有自己的排序方法即table.sort(table,function)。     lua中的排序默认是从大到小的排序;     传入一个方法参数,可以使排序从小到大; 打印结果:  ...

SURF算法简述及Python标记SURF特征检测实践

目录 一、SURF算法 1.算法简介 2.SURF与SIFT的具体差异 二、Python代码实践 1.测试环境 2.测试代码 3.核心函数 4.测试结果 一、SURF算法 1.算法简介 SURF(Speeded-Up Robust Features)加速稳健特征,是一种稳健的局部特征点检测和描述算法。 SURF是对SIFT算法的改进,该算子在保持 SIFT 算子优良性能特点的基础上,同时解决了 S...

Selenium3自动化测试——19.读取数据文件

1. 实现目标 在测试与开发中,经常需要对文件进行各种读取操作。这里介绍针对txt、csv、xml、json文件的读取。 2. 读取TXT文件 2.1 user_info.txt文件 2.2 读取txt文件.py 2.3 实现结果 3. 读取csv文件 3.1 user_info.csv  这里要注意,csv文件本身打开是utf-8的,而不是乱码 3.2 读取csv文件.py 这里,针对...

Flask 介绍

Flask 学习笔记 一、Flask 简介         Flask 是一款非常流行的 Python Web 框架,出生于 2010 年,作者是 Armin Ronacher,本来这个项目只是作者在愚人节的一个玩笑,后来由于非常受欢迎,进而成为一个正式的项目。         Flask 自2010年发布第一个版本以...