表单及表格

表单介绍

表单的概念: 表单是用来收集用户的信息或是数据

1、提交按钮、重置按钮、普通按钮

    <form >
        <!--提交按钮将数据提交到指定位置-->
        <input type="submit"value="提交按钮" /><!--value表示初始的值-->
        <!--重置按钮，重置已经填写的表单内容-->
        <input type="reset" value="重置按钮" />
        <!--普通按钮-->
        <input type="button"value="普通按钮" />
        <!--submit  reset  button  表示按钮的类型-->
    </form>

2、单选框、复选框

    <form>
        <!--单选框，单选项必须有一个共同的name，表示它们为一组-->
        <input type="radio" name="rad" id="rad1"/><label for="rad1">单选A</label> <br /><!-               -br表示换行-->
        <input type="radio" name="rad" id="rad2"/><label for="rad2">单选B</label> <br />
        <input type="radio" name="rad" id="rad3"/><label for="rad3">单选C</label> <br />
        <!--多选框-->
        <input type="checkbox" name="check"id="check1"/><label for="check1">多选A</label>             <br /><!--br表示换行-->
        <input type="checkbox" name="check"id="check2"/><label for="check2">多选B</label>             <br />
        <input type="checkbox" name="check"id="check3"/><label for="check3">多选C</label>             <br />
        <!--<label for=""></label>表示和单选或复选框连在一起，点击选项也会选中选项-->
    </form>

3、文本框、密码框

    <form>
        <!--文本框-->
        <input type="text" name="text" id="text" value="初始值"placeholder="占位符" />
        <!--密码框-->
        <input type="password" name="pwd" id="pwd" value="初始值"placeholder="占位符" />
        <!--提交时两个属性必须有name，placeholder表示占位符，阴影显示，不占位置不会被提交-->
    </form>

4、下拉框

    <!--下拉框-->
    <select>
        <option>下拉A</option>
        <option>下拉B</option>
        <option>下拉C</option>
        <option>下拉D</option>
    </select>

5、文本域

    <!--文本域-->
    <textarea rows="" cols=""></textarea>
    <!--rows表示文本区内可见的行数
    cols表示文本区内可见的列数-->

表格介绍

    <table >
    <caption>表格标题</caption>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
    <!--colspan="" 合并列数
    rowspan=""合并行数
    tr表示行
    td表示列
    caption表示表格标题
    padding表示填充
    -->

【table的常用属性】

1-border：表格边框属性；当使用border="1"设置边框时，会在所有td以及table上嵌套边框，当border加大时，只有table框会加粗。

2-cellspacing：单元格与单元格之间的间隙。当cellspacing="0"时，单元格之间的间隙为0，但边框线并不会合并。

☆☆合并边框的写法style=“border-collapse:collapse;” 使用边框合并时，无需设置cellspacing。

3-cellpadding:单元格内边距，单元格中文字与单元格边框之间的距离。

4-width/height:表格的宽高

5-align：设置表格在父容器中的对齐方式，left/居左 center/居中 right/居右

☆☆当表格使用align属性时，相当于使表格浮动，可能会导致表格后面的元素受表格浮动影响，导致布局错乱。

6-bgcolor：背景色

7-background：背景图，后接相对路径。背景图和背景色同时生效时，图会覆盖背景色

8-bordercolor：设置边框颜色

【tr、td标签的属性】

当表格属性与行列属性冲突时，以行列属性为优先，属性设置优先级td>tr>table。

1-width,height:给单个的行列设置宽高

2-bgcolor:背景色

3-align：设置单元格中的文字，在单元格中的水平对齐方式 left/center/right

4-valign:设置单元格中文字在格中的垂直对齐方式 top/center/bottom

5-nowrap:nowrap="nowrap"设置单元格文字行末不断行

【表格的跨行与跨列】

1-跨列：colspan，某单元格跨N列，则该单元格右边的N-1个td就不需要了。

2-跨行：rowspan，某单元格跨N行，则该单元格下边的N-1个td就不需要了。

猜你喜欢