HTML表单·表格标签

最新推荐文章于 2022-11-17 09:56:48 发布

ThReE_To

最新推荐文章于 2022-11-17 09:56:48 发布

阅读量643

点赞数

分类专栏： HTML入门文章标签： html

本文链接：https://blog.csdn.net/ThReE_To/article/details/48449773

版权

HTML入门专栏收录该内容

7 篇文章 0 订阅

订阅专栏

表单和表格

一· 表格

1.表格的基本结构：table标签（表格）、tr标签（行）、thead标签（表头）、tbody标签（表身）、tfoot（表脚）、td标签（标准单元格）、th标签（表头单元格）
2.table标签属性 边框border=“?px” 表示是否有边框，边框的宽度是多少；cellpadding="" 是指表格内容与边框的距离；cellspacing=""是指表格与表格之间的距离； 
3.合并行（rowspan属性）：
例：<html>
    <head>
    <title>合并行rowspan</title>
    </head>
    <body>
    <table>
        <!--第1行-->
        <tr>
            <td>姓名:</td>
            <td>小明</td>
        </tr>
        <!--第2行-->
        <tr>
            <td rowspan="2">喜欢水果:</td>
            <td>苹果</td>
        </tr>
        <!--第3行-->
        <tr>
            <td>香蕉</td>
        </tr>
    </table>
    </body>
    </html>
4.合并列（colspan属性）：
例：<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>合并列colspan</title>
</head>
<body>
    <table>
        <!--第1行-->
        <tr>
            <td colspan="2">JavaScript</td>
        </tr>
        <!--第2行-->
        <tr>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <!--第3行-->
        <tr>
            <td>jQuery</td>
            <td>SEO</td>
        </tr>
    </table>
</body>
</html>

二.表单标签

1.<from>表单标签；要创建一个表单，那你就要把表单的那些各种标签放在表单标签<form>内部；
语法：<from>表单各种标签</form>
<from>标签的属性：action="" 表示制定服务器端处理此表达的组件；method="get/post"表示文件的传输方式，取get值时表单内容会直接显示在URL框里，安全性较差；取POST只时表单数据被包含在表单主体中，然后被传送到处理程序上，安全性较好；enction="multiport/form-data"此值在有文件上传的情况下是必选的。
2.<input>标签type属性：
    1.text 单行文本域 2.password 密码域 3.button 按钮（需配合JS使用） 4.reset 重置按钮 5.radio 单选按钮(如果是多个选项 须把所有选项放在一个组里面，才能实现单选)
    6.checkbox复选框（可实现多选，和radio的图标不同，需要配合lable for使用，例：<input type="checkbox" id="check1"/><lable for="check1">香蕉</lable>；<input type="checkbox" id="check2"/><lable for="check2">香蕉</lable>；）
    7.image 图像域 属性src（图片的地址）可是使按钮更美观；8.submit 提交按钮  9.hidden 隐藏域（不会在用户界面显示，而且不会破坏布局） 9.file 文件域 提供上传文件功能（from标签 method推荐使用 POST属性：不会限制上传文件的大小，而get属性文件大小限制。）
3.<textarea>多行文本域   属性  列 cols="" 行rows=""
    语法：<textarea cols="" rows=""></textarea>
    例：<html>
        <head>
        <title></title>
        </head>
        <body>
        <form name="form1" method="post" action="index.html">
            <textarea rows="8" cols="40"></textarea>
        </form>
        </body>
        </html>
4.下拉选项
    语法：<select>
            <option>选项显示的内容</option>
            ……
            <option>选项显示的内容</option>
        </select>
    属性：size：下拉列表展开之后可见列表项的数目

ThReE_To

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表单·表格标签

表单和表格一· 表格1.表格的基本结构：table标签（表格）、tr标签（行）、thead标签（表头）、tbody标签（表身）、tfoot（表脚）、td标签（标准单元格）、th标签（表头单元格）2.table标签属性边框border=“?px” 表示是否有边框，边框的宽度是多少；cellpadding="" 是指表格内容与边框的距离；cellspacing=""是指表格与表格之间的距离； 3.
复制链接

扫一扫