美文网首页
HTML之CSS——表格与表单(拓展)

HTML之CSS——表格与表单(拓展)

作者: 思君_4cd3 | 来源:发表于2019-09-29 14:23 被阅读0次

    在之前的文章里,小编已经写过关于表格,表单,文本框以及按钮的相关知识了,这篇文章则是在之前文章的基础上作出拓展,那么让我们学起来吧~嘿嘿!

    一.表格

    table标签(表格),tr标签(行),td标签(标准单元格),caption标签(标题),th标签(表头单元格),thead标签(表头)tbody标签(表身),tfoot标签(表脚)


    示例
    示例

    居中的两种方式:


    示例
    th和td的区别:
    示例
    1.单元格合并

    colspan:单元格占用表格列数
    rowspan: 单元格占用表格行数


    示例

    表格属性:
    单元格之间的空白:cellspacing
    单元格的边沿和内容之间的空白:cellpadding
    跨列合并:colspan
    跨行合并:rowspan

    二.表单

    表单是收集用户信息的,就是让用户填写的,选择的
    <div>
    <h3>欢迎注册本网站</h3>
    <form>
    所有的表单内容,都要写在form标签里
    </form>
    </div>
    form是英语表单的意思,form中间可以添加文本框,密码框,单选框,复选框,下拉列表,按钮,文本域等内容。
    表单域标签<form>...</form>
    用途:与用户交互,收集用户输入信息


    属性
    示例
    提交

    当你提交内容以后会直接回复服务器错误,如果当你的链接指向后台数据库的时候,你提交后的内容直接存入后台数据库。


    示例
    重置
    属性:
    name:给表单起名
    action:表单数据提交的服务器地址
    method:表单提交方式(get/post)
    表单中的元素:
    文本框:<input type="text" name="属性值"/>
    密码框:<input type="password" name="属性值"/>
    下拉列表:
    <select>
    <option>列表项</option>
    <option>列表项</option>
    <option>列表项</option>

    </select>
    单选框:<input type="radio" name="属性值"/>
    复选框:<input type="checkbox" name="属性值"/>
    文本域:<textarea rows="10" cols="10"/>
    提交按钮:<input type="submit"/>
    重置按钮:<input type="reset"/>
    普通按钮:<input type="button"/>或者<button></botton>


    示例
    示例
    表单标签:

    <input>...<input>


    属性默认选择
    示例
    示例
    不可点击

    (此文章仅作为个人学习笔记使用,如有错误欢迎指正~)

    相关文章

      网友评论

          本文标题:HTML之CSS——表格与表单(拓展)

          本文链接:https://www.haomeiwen.com/subject/txomyctx.html