zoukankan      html  css  js  c++  java
  • 第三篇 HTML 表单及表格

    表单及表格

    表单,常用在登录、注册等地方,这也是一个最基本的。
     
    我们就用登录,来学习什么是表单!
     
    表单 form 标签,在某些好用的编辑工具,比如:WebStorm  你在上面写出form再按下 键盘左侧的‘Tab’键,会直接弹出form的开始和结束标签,其他元素 div table span 等都是一样的,还会弹出此元素必要的 属性, 比如img 按下 ‘Tab’ 就会弹出 这样的 <img src="' alt="" /> 它会直接帮你写好。
     
    来吧,继续说form表单,因为是介绍给入门同学的,所以就先不涉及后台验证和JS验证,还有数据库连接等操作了。就先实现最基本的静态 表单样式,各位同学,写代码也不要光想着随便写出来,还要想着可扩展性。先不考虑复杂的,用最基本的 form验证,得按照form表单的规则,用input来写文本框,最后 用submit来提交,别随便用其他标签写,就把前端的形式给展现出来,那么后期你扩展,和后台交互,就麻烦了,还要去写JS事件转换,ajax等异步处理。所以我们在编写一个程序的时候,先考虑怎么写,把自己会的都往上面加,然后想到一个最简单的方式。。。
     
    我们先写一个最基础的,给同学们演示一下,不过先不加任何的css样式:
     
    <form action="#" method="post">
        <p>
            用户名: <input type="text" />
        </p>
        <p>
            密码: <input type="password" />
        </p>
        <p>
            <input type="submit" value="登录" />
        </p>
    </form>
     
    以上代码,就是最简单的登录,那么我们来解释一下这里的代码,是什么意思:
     
    里面我们用到了 p标签,因为它是段位,会跨行,上下会有一点间距,所以用来把 用户名、密码、登录按钮 给分割开。在用户名后面 我们用到了 input标签,它是专门写文本框的,标准情况下,它是在form表单里的,写在外面的话会包语法错误,而input 有一个 type的属性,这也是关键,它的值很多, text 是代表文本框,可以输入 可见的 内容,而password 是密码,输入的话,用户就看不见,只会呈现出密码的样式, submit是表单提交按钮的意思,value则是它的值,如果没有设置 value的话,submit是默认“提交”两个字。  细心的同学不光是注意form表单内部,还会注意它本身,看到 action="#" 和 method="post" 了吗? action是url(地址)指向,就是我们表单提交后,它会走向哪里, method是它的提交方式,gat和post, post的安全性比gat高,它们的区别,大家去网上找找,这里我就不多说了。
     
    table表格,它常用在后台管理,比如用户管理等
    我们先写一段代码给同学们看看:
     
    <table>
        <tr>
            <th>编号</th><th>用户名</th><th>QQ</th>
        </tr>
        <tr>
            <td>1</td>
            <td>龙枫</td>
            <td>563292416</td>
        </tr>
        <tr>
            <td>2</td>
            <td>同学</td>
            <td></td>
        </tr>
    </table>
     
    不懂的同学,就写一段相同的代码测试。我们就来解释下,table表格里的标签是什么意思:
    tr也是活在table下面的,它如同块级元素,是可跨行的,它是控制 td、th的,内容都是 td和th提供的,他们则是行级元素。th的字体比td深,就是加粗过的,一般就用与表格里的分类一样,td则是纯内容。他们会对齐的哦,一个tr下的td会对应下面一个tr里的td,他们是一列对应的。table也有属性,但也属于css样式,我们就先不管,在这里就先做出一个最基本的表格。
     
  • 相关阅读:
    springmvc 配置多视图,返回jsp,velocity,freeMarker,tiles(模板)等等
    spring,mybatis,多数据源配置
    springMVC分页,interceptor实现
    springMVC全局Exception异常处理SimpleMappingExceptionResolver
    百度FIS入门
    如何安装nodejs
    如何高效部署前端代码,如css,js...
    javascript url几种编码方式
    【转】RBAC权限管理
    elasticsearch 之IK分词器安装
  • 原文地址:https://www.cnblogs.com/longfeng995/p/7590362.html
Copyright © 2011-2022 走看看