前端——table标签和form标签和控件:table,input的type类型,select和option,label,textarea

表格标签 table

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等

用法

<table>  表格
<thead>  表格头
<tr> 表格行
<th> 标题行的单元格数据
<tbody> 表格主体
<td> 表格内的单元格数据
 <tfoot> 表格底部

rowspan 合并行(竖着合并)
colspan 合并列(横着合并)

在这里插入图片描述

<body>
    <div class="table">
    	<!--border 边框,cellspacing边框间隙-->
        <table border="1" cellspacing="0">
            <!--表格头-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--这里使用的是th-->
                    <th></th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
            </thead>
            <!--表格主体-->
            <tbody>
                <!--表格行-->
                <tr>
                    <td rowspan="3">上午</td>
                    <!--这里使用的是td-->
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
           
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>

                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <td rowspan ="2">下午</td>
     
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
      
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td colspan="6">课程表</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>

表单标签 form

form 标签是块级元素,action属性是要提交到服务端处理的网址,methon属性默认是get,如果是文件的话,method是post

label标签

是行内元素,label 用来关联文本和表达元素的,点击文本时相当于点击了表达元素。

鼠标移动到”用户名“三个字时,会变成箭头,点击用户名相当于点击了输入框,优化体验,

<label for="user">用户名:</label>
<input type="text" name="usename" id="user" placeholder="请输入用户名" >

点击按钮会选中选项,点击”男“字也会选中

<input type="radio" name="sex" value="男" id="s1">
<label for="s1">男</label>

也可以这样写:
<label><input type="radio" name="sex" value="男" />男</label>
如果没有label则鼠标停留在字体上时会变成选择文本,点击无反应

<input type="radio" name="sex" value="男" />男

input元素

可以设置宽高,行内块元素

input type 属性,name值提交表单的时候在url存在,id 值和lable for 绑定的
textarea

用法


    <form action="http://www.baidu.com">
         <!-- input type="text" 输入文本,name属性会在url里 value="请输入用户名称"是默认值 readonly只读-->
            <p>
                用户名称:
                <input type="text" name="txtUsename" value="请输入用户名称" readonly>
            </p>
            <p>
                <!--type = password 密文形式 placeholder 阴影提示字-->
                用户密码:
                <input type="password" name="txtUsepwd" placeholder="请输入密码">
            </p>
            <p>
                <!--disabled 输入框不可用-->
                确认密码:
                <input type="password" name="txtcfmpwd" disabled>
            </p>
            <!--单选框,type="radio",checked=''默认被选中,但是要互斥的话,name值要相同,name值不同就会复选-->
            <p>
                用户性别:
                <input type="radio" name="sexrdo" value="男">男
                <input type="radio" name="sexrdo" value="女" checked=''>女
            </p>
            <!--复选框type="checkbox",name取值尽量一致-->
            <p>
                用户爱好:
                <input type="checkbox" name="chkhobby" value="吃" checked> 吃
                <input type="checkbox" name="chkhobby" value="喝"> 喝
                <input type="checkbox" name="chkhobox" value="玩"> 玩
                <input type="checkbox" name="chkhobox" value="乐" checked> 乐
            </p>
            <!-- 按钮 submit功能负责将表单中的表单提交给服务端 -->
            <p>
                <input type="submit" name="btnsbt" value="提交">
                <input type="reset" name="btnrst" value="重置">
                <input type="button" name="btnbtn" value="普通按钮">
            </p>
            <!--文件选择框 type="file"-->
            <p>
                请上传文件:
                <input type="file" name="txtfile">
            </p>
            <!--文本域 可以调整长宽,列cols="20" 行rows="5" textarea-->
            <p>
                自我介绍:
                <textarea name="txt" cols="20" rows="5" placeholder="请作自我介绍"></textarea>
            </p>
            <!--下拉列表 name urld地址中存在,通常跟option配合,选择项。size大于1是滚动效果 multiple设置以后实现多选效果,ctrl+鼠标左键进行多选-->
            <p>籍贯:
                <select name="sel" size="3" multiple>
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <!--selected 默认被选中-->
                    <option value="广州" selected>广州</option>
                </select>
            </p>

    </form>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Light__1024/article/details/86697325