HTML5 Day3-表格、表单、input框等

2301_76534754

于 2024-01-05 11:13:58 发布

阅读量561

点赞数 18

文章标签：前端 java 服务器

本文链接：https://blog.csdn.net/2301_76534754/article/details/135401315

版权

3.1 表格table

表格用<table>标签定义，标题用<caption>，tr代表行，td代表列，th代表表头，th的表头也代表一行

表格的属性：

border:边框的粗细

width:表格的宽度，整数不加单位

heigth:表格的高度，整数不加单位

cellspacing:表格与表格之间的间隙

cellpadding:表格中的文本内容与左边框的距离

rowspan:所跨的行数

colspan:所跨的列数

<body>
    <!-- table表格：
        tr代表行
        td代表列
        th代表表头，th的表头也代表一行
    -->
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>毕业学校</th>
        </tr>
        <tr>
            <td>康硕天</td>
            <td>18</td>
            <td>湖南大学</td>
        </tr>
    </table>
</body>

<body>
<!-- 
        border：边框的粗细
        width:表格的宽度，整数不加单位
        height:表格的高度，整数不加单位
        cellspacing:表格与表格之间的间隙
        cellpadding:表格中的文本内容与左边框的距离
     -->
    <table border="5" width="400" height="300" cellspacing="0" cellpadding="20">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>毕业学校</th>
        </tr>
        <tr>
            <td>康硕天</td>
            <td>18</td>
            <td>湖南大学</td>
        </tr>
        <tr>
            <td>康硕天</td>
            <td>18</td>
            <td>湖南大学</td>
        </tr>
        <tr>
            <td>康硕天</td>
            <td>18</td>
            <td>湖南大学</td>
        </tr>
    </table>
</body>

合并行和列

<body>
    <table border="1" width="200">
        <tr>
            <td colspan="3">课程成绩</td>
        </tr>
        <tr>
            <td rowspan="2">语文</td>
            <td>期中</td>
            <td>80</td>
        </tr>
        <tr>
            <td>期末</td>
            <td>90</td>
        </tr>
        <tr>
            <td rowspan="2">数学</td>
            <td>期中</td>
            <td>89</td>
        </tr>
        <tr>
            <td>期末</td>
            <td>99</td>
        </tr>
    </table>
</body>

表格数据的分组<thead> <tbody> <tfooter>(了解)

3.2 表单form

form标签主要用于表单结果的处理和发送

action：规定当提交表单时向何处发送表单数据

method：规定用于发送表单数据的 HTTP 方法

name:规定表单的名称

target：规定在何处打开 action URL。(_blank _self)

3.3 input框

input可以用来定义用户输入数据的输入字段，根据不同的type属性值可以定义不同的表单类型

type的属性值描述
text 单行文本输入框
radio 单选按钮,checked属性在radio、checkbox中生效
checkbox 复选框
password 密码输入框
reset 重置按钮
submit 提交按钮
search 搜索框
button 按钮
number 只能输入数字
tel 电话号输入框
date 日期选择器
month 月份选择器
time 时间选择器
file 选择文件空间，用于上传文件
hidden 隐藏的输入区域

单选框和复选框必须有value值，和后端数据库对应

type的属性值	描述
text	单行文本输入框
radio	单选按钮,checked属性在radio、checkbox中生效
checkbox	复选框
password	密码输入框
reset	重置按钮
submit	提交按钮
search	搜索框
button	按钮
number	只能输入数字
tel	电话号输入框
date	日期选择器
month	月份选择器
time	时间选择器
file	选择文件空间，用于上传文件
hidden	隐藏的输入区域

<body>
    <form action="" name="uform" method="get">
        用户名:<input type="text" name="username" />
        密码:<input type="password" name="password" />
        性别:<input type="radio" name="sex" value="male" />男
        <input type="radio" name="sex" value="female" />女
        爱好:<input type="checkbox" name="hobby" value="zq" />足球
        <input type="checkbox" name="hobby" value="lq" />篮球
        <input type="checkbox" name="hobby" value="ymq" />羽毛球
        <input type="checkbox" name="hobby" value="ppq" />乒乓球
        <input type="reset" />
        <input type="button" value="按钮"/>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>
    </form>



    <label for="">了解</label><br>



    <select name="hobbys" id="" size="1" multiple>
        <option value="111">打羽毛球</option>
        <option value="222" selected>打篮球</option>
        <option value="333">足球</option>
    </select><br>
    

    <textarea name="" id="" cols="30" rows="10">多行文本框</textarea>
</body>

3.4 标签元素 label

label标签用于为表单中的其他控件元素添加说明文字，当用户在浏览器中单机label元素生成的标签时，会自动将聚焦转移到该标签相关的表单控件上，label最重要的属性是for属性，for属性把label元素绑定到另一个元素，把for属性的值设置为相关元素的id属性值，指定为关联表单控件的id。
<label for="id" >姓名：<input type="text" /></label>

3.5 选择栏 select

select可以创建下拉列表框，实现单选或多选菜单，select标签必须配合option标签使用

// multiple可选择多个选项  size指定下拉列表中同时显示选项的数目
<select  name="uname" multiple size='1'>
    <option value="zs" selected>张三</option>
    <option value="ls">李四</option>
    <option value="we">王二</option>
    <option value="mz">麻子</option>
</select>

3.6 多行文本框 textarea

<textarea name="名称" rows="行数" cols="列数"></textarea>

小知识点：

autocomplete="off" 关闭自动补全

readonly 设置为只读，不能修改

disabled 设置为禁用，属性值是true和false

autofocus 自动获取焦点

placeholder 提示内容

required 必输项

2301_76534754

关注

18
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
HTML5 Day3-表格、表单、input框等

姓名：<input type="text" />
复制链接

扫一扫