表单 表格

1.table表格:

    语法:
        <table>
            <tr>
                <td></td>
            </tr>
        </table>

    结构化表格:
        <table>
            <thead>
                <tr>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                </tr>
            </tfoot>

        </table>

    属性: border-collapse: collapse;  (表格边框合并)

          table-layout:fixed;(固定均分表格的宽度)

    表格的合并:

        跨行合并: 假如你要合并2 3 4行的第2列,那么在最小行的第2列身上添加rowspan="3",然后删掉其他行的第2列

        跨列合并: 加入你要合并同一行的1 2 3 4列,那么在最小列上设置colspan="4",然后删掉其他列

2.form表单

表单组成:

        表单标签:form,会定义URL地址及提交方式

        表单域:用户进行输入的地方(文本框 密码框 下拉框等)

        表单按钮:提交按钮 重置按钮 普通按钮

    表单标签:

        语法: 

            <form action="提交的URL地址" method="提交的方式"></form>

    表单域:

        input相关:

            <input type="text">  --   文本框
            <input type="password">  --   密码框
            <input type="radio">  --   单选框
            <input type="checkbox">  --   多选框
            <input type="file">  --   文件上传框
            <input type="hidden">  --   隐藏域

        下拉框:

            语法:

                <select name="">
                    <option></option>
                    <option></option>
                </select>

name属性:

   理解:name属性是往后台提交数据的桥梁,要提交数据,必须写name属性;

   注意:单选框和多选框name属性必须保持一致

value属性:

   理解:value属性是要提交的值

   注意:单选框和多选框必须有value属性

   下拉框可以不写value属性,默认会提交option中间的值,切结不要写成value=""

其他属性:

    placeholder  --  默认提示文字

    maxlength    --  最长可输入长度

    readonly     --  可以读取,可以提交,禁止修改

    disabled     --  禁止读取,禁止提交,禁止修改

    checked      --   单选框多选框默认选中状态

    selected     --   下拉框默认选中状态

表单按钮:

    <button>提交按钮</button> 

    <button type="button">普通按钮</button> 

    <button type="reset">重置按钮</button> 

label标签:

    写法一: <label> 用户名:<input type="text" name="username" id=""></label>  --  推荐使用

    写法二: <label for="num">手机号:</label><input type="text" name="phonenum" id="num">