HTML表格表单及框架标签

一.表格标签

1.<table></table> 创建表格

2.<caption></caption> 表格的标题

3.<tr></tr>Table Row（表格行）

4.<td></td>Table Data（表格数据）其中有属性rowspan="2" colspan="2" 用来优化表格合并表格

5. <thead></thead>表格头部标签 <tbody></tbody> <tfoot></tfoot> 将表格分成三个部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table bgcolor="#ff6347" border="1" width="80" height="200" align="center" cellspacing="0">
        <caption><h2>我是表格的标题</h2></caption>
        <tr align="center" valign="top" bgcolor="red">
            <td rowspan="2">1</td>
            <td colspan="2">2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
</body>
</html>

效果展示:

二.表单

1.<form action="" method="post" enctype="multipart/form-data" > </form>,其中 action属性表示数据提交到的路径

注意:

如果表单项中出现文件上传项那么需要两件事

1.表单的传输方式必须为post方式

2.更改传输编码格式在form标签中enctype="multipart/form-data"

2.<input type="text" name="username" value="" > 文本格式

3.<input type="password" name="password" value="">密码格式

4. <input type="radio" id="nan" name="sex" value="1"> 单选框

如

5.<input type="checkbox" name="hobby[]" id="one" value="0"> 多选框

注意在设置成多选框时name后面一定要有[].这样后端才能拿到数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签及其属性</title>
</head>
<body>
    <h2> 用户登入</h2>
    如果表单项中出现文件上传项那么需要两件事
        1.表单的传输方式必须为post方式
        2.更改传输编码格式 在form标签中enctype="multipart/form-data"
       <form action="" method="post" enctype="multipart/form-data" >
        用户名:
        <input type="text" name="username" value="" >
        <br>
        密码:
        <input type="password" name="password" value="">
        <br>
        <input type="radio" id="nan" name="sex" value="1">
        <label for="nan">男</label>
        <input type="radio" id="nv" name="sex" checked value="2">
        <label for="nv">女</label>
        <label >
        <input type="radio" id="w" name="sex" value="3" >未知
        </label>
        <input type="submit" value="登入">
        <br>爱好:
        <input type="checkbox" name="hobby[]" id="one" value="0">
        <label for="one">学习</label>
        <input type="checkbox" name="hobby[]" value="1" checked>打球
        <input type="checkbox" name="hobby[]" value="2">吃
        <input type="checkbox" name="hobby[]" value="3">喝
        <input type="checkbox" name="hobby[]" value="4">乐
        <br>
        <input type="file" name="" id="">
        <input type="hidden" name="hidde" id="hello">
    </form>



</body>
</html>

效果展示

会员表

thead,tbody,tfoot的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
        tbody:hover{
            background-color: tomato;
        }
</style>
</head>
<body>
    <table border="1" width="600" align="center" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>编号</th>
                <th>用户名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>1</td>
                <td>admin</td>
                <td>18</td>
                <td>男</td>
                <td>
                    <a href="">删除</a>
                    <a href="">修改</a> 
                </td>
            </tr>
            <tr align="center">
                <td>1</td>
                <td>admin</td>
                <td>18</td>
                <td>男</td>
                <td>
                    <a href="">删除</a>
                    <a href="">修改</a> 
                </td>
            </tr>
            <tr align="center">
                <td>2</td>
                <td>xiaohong</td>
                <td>18</td>
                <td>女</td>
                <td>
                    <a href="">删除</a>
                    <a href="">修改</a> 
                </td>
            </tr>
            <tr align="center">
                <td>3</td>
                <td>xiaoming</td>
                <td>19</td>
                <td>男</td>
                <td>
                    <a href="">删除</a>
                    <a href="">修改</a> 
                </td>
            </tr>
            <tr align="center">
                <td>4</td>
                <td>xiaohei</td>
                <td>19</td>
                <td>男</td>
                <td>
                    <a href="">删除</a>
                    <a href="">修改</a> 
                </td>
            </tr>
        </tbody>
    <tfoot>
        <tr>
            <td colspan="5" align="center">
                <a href="">首页</a>
                <a href="">上一页</a>
                <a href="">下一页</a>
                <a href="">尾页</a>
            </td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td> -->
 
        </tr>
    </tfoot>

    </table>
</body>
</html>

下拉列表

1.<select> </select> 下拉列表标签

2.<option value=""></option> 选项标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="get">
        <input type="text" name="" id="">
        <!-- <input type="image" src="../../img/img2.png" name="" id="" width="50"> -->
        <button>提交</button>
        <input type="submit" name="submit" id="">

        <button type="button">这只是一个按钮</button>
        <input type="reset" value="重置" name="" id="">
<br>
<!-- 多行文本输入  -->
       地址:<textarea name="address" id="" rows="5" cols="50">  admim</textarea>
        <!-- 下拉列表 -->
        <select name="xueli" id="">
            <option value="xueli">--请选择--</option>
            <option value="0">小学</option>
            <option value="1">初中</option>  有value拿value没有就拿文本
            <option value="2">高中</option>
            <option value="3">专科</option>
            <option value="4" selected>本科</option>
            <option value="5">研究生</option>
        </select>
   
    </form>
    
</body>
</html>

效果展示

h5中新增表单

请看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5中新增的表单</title>
</head>
<body>

    <form action="" method="get">
        <fieldset>
            <legend>个人基本信息</legend>
            姓名:
            <input type="text" name="name" id="">
            性别:
            <input type="radio" name="sex" value="0">女
            <input type="radio" name="sex" value="1">男
            <br>
            年龄:
            <input type="text" name="age" id="" value="">
            电话:
            <input type="text" name="phone" id="">
        </fieldset>

        <br>        
        <fieldset>
            <legend>基本情况</legend>
            身高:
            <input type="text" name="height" id="">
            体重:
            <input type="text" name="weight" id="">
            <br>
            三围
            <input type="text" name="" id="">
        
         </fieldset>

<select name="" id="">
    <option value="">--请选择--</option>
    <optgroup label="服装">
        <!-- <option value="">服装</option> -->
        <option value="">女装</option>
        <option value="">童装</option>
    </optgroup>

    <optgroup label="数码">
        <!-- <option value="">数码</option> -->
        <option value="">笔记本</option>
        <option value="">台式</option>
        <option value="">照相机</option>
    </optgroup>
</select>
    <br>   
    邮箱验证
    <input type="email" name="email" id="">
    URL验证
    <input type="url" name="url" id="">
    <input type="submit" name="submit" id="">    <br>

    数值<input type="number" name="num" id="" min="0" max="100">
    滑块<input type="range" name="range" id=""min="0" max="100" value="100">
    <br>
    搜索<input type="search" name="search" id="">
    <br>
    颜色选取<input type="color" name="color" id="">
    电话:
    <input type="tel" name="phone" id="">

    日期<input type="date" name="" id="">
    <br>
    时间<input type="time" name="" id="">
    <br>
    周<input type="week" name="" id="">
    <br>
    月<input type="month" name="" id="">
    <br>
    <input type="datetime-local" name="" id="">
    </form>
    
</body>
</html>

Form表单常用属性

1.readonly只读

2.novalidate取消表单验证适用于Form标签

3.multiple可以选择多个

4.pattern正则匹配

5.step 用于数值表单设置步长

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="get" novalidate> novalidate取消表单验证 适用于Form标签
        <input type="text" name="admin" id="" value="admin" readonly>
        <br>
        <input type="text" name="user1" id="" value="admin" disabled>  
        <br>
        <input type="text" name="user2" id="" autofocus>
        <br>
        <input type="text" name="user3" id="" required placeholder="手机号/用户名/邮箱">
        <input type="submit" name="" id="">
        <br>
        <input type="file" name="file" id="" multiple> multiple可以选择多个
        <br>
        <input type="text" name="pattern" id="" pattern="[a-z]">正则匹配
        <br>
        <input type="number" name="" id="" step="2">
        <input type="submit" name="" id=""
            formaction="http://www.baidu.com"
            formmethod="post"
            formenctype="multipart/form-data"
            value="提交">

        

    </form>
</body>
</html>

框架标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    框架标签
   <iframe src="http://www.lmonkey.com" width="100%" frameborder="0">

   </iframe> 
</body>
</html>

如