web中的table和form详介

弃子02

已于 2023-03-26 16:32:20 修改

阅读量150

点赞数 1

分类专栏： web前端技术文章标签： web html5

于 2023-03-26 16:30:53 首次发布

本文链接：https://blog.csdn.net/m0_73749469/article/details/129779878

版权

web前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

web中的table和form问题

table介绍
form介绍

table介绍

基本语法

table 表格标记
tr 行标记
th 表头标记
td 单元格标记

举例说明：

<table>
	<tr>
		<th colspan="3"></th>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>
标签之间加内容即可

合并行列

这里有两种合并方式，一种是合并行，用rowspan，另一种是合并列，用colspan表示
举例说明：

<html>
    <table border="1" width="300">
        <caption>学生成绩单</caption>
        <tr>
            <th rowspan="3">学生姓名</th>
            <th colspan="2">课程名称</th>
        </tr>
        <tr align="center">
            <td>语文</td>
            <td>数学</td>
        </tr>
        <tr align="center">
            <td>张三</td>
            <td>95</td>
            <td>99</td>
        </tr>
        <tr align="center">
            <td>李四</td>
            <td>82</td>
            <td>93</td>
        </tr>
    </table>
</html>

结果如下
在这里插入图片描述

表格内边框去除

这里用到的是rules属性，具体如下

在上述代码中这样操作：
<table border="1" width="300" rules="none">

查看结果
在这里插入图片描述

form介绍

基本语法

在这里插入图片描述

属性介绍

这里面先主要介绍type里各属性

<tr>
                    <td height="32" colspan="3" align="center">邮箱会员注册</td>
                </tr>
                <tr>
                    <td width="120">用户名：</td>
                    <td width="250"><input type="text" name="myname" autofocus required>*</td>
                    <td width="60">html5 autofocus</td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" name="mypassword"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <label><input type="radio" name="rad" value="rad1">男</label>
                        <label><input type="radio" name="rad" value="rad2">女</label>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="email" name="myemail" required>*</td>
                    <td>html5新增</td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td><input type="tel" name="tel" required>*</td>
                    <td></td>
                </tr>
                <tr>
                    <td>年龄：</td>
                    <td><input type="number" name="myage" min="16" max="28">16-28之间</td>
                    <td>html5新增</td>
                </tr>
                <tr>
                    <td>专业：</td>
                    <td><input type="text" list="alist" name="mydepartment" placeholder="请选择专业">
                        <datalist>
                            <option value="computer"></option>
                            <option value="physcis"></option>
                            <option value="chinese"></option>
                            <option value="Maths"></option>
                        </datalist>
                    </td>
                    <td>html5新增</td>
                </tr>
                <tr>
                    <td>出生日期：</td>
                    <td><input type="date" name="birthdate"></td>
                    <td>html5新增</td>
                </tr>
                <tr>
                    <td>周数：</td>
                    <td><input type="week" name="myweek"></td>
                    <td>html5新增</td>
                </tr>
                <tr>
                    <td>您选择的颜色：</td>
                    <td><input type="color" name="mycolor"></td>
                    <td>html5新增</td>
                </tr>
                <tr>
                    <td>英语等级：</td>
                    <td><input type="range" name="rank" min="2" max="8"
                       step="2" value="4" onchange="showr.value=value" >
                       <output id="showr">4</output>级</td>
                    <td></td>
                </tr>
                <tr>
                    <td>请选择文件：</td>
                    <td><input type="file" id="myfile" multiple form="myform"></td>
                    <td></td>
                </tr>


                <tr>
                    <td>爱好：</td>
                    <td>
                        <label><input name="check1" type="checkbox" value="sport">户外</label>
                        <label><input name="check2" type="checkbox" value="voice">音乐</label>
                        <label><input name="check3" type="checkbox" value="movie">购物</label>
                        <label><input name="check4" type="checkbox" value="shopping">其他</label>
                    </td>

上面是做的主要的输入框及类型，接下来看下实际效果
在这里插入图片描述

表格细节

required属性可以使表单项为必填，比如上述表单的加*的部分，如果不填，则会不能提交表单，添加属性操作如下

这里单从email表单为例子描述
<td><input type="email" name="myemail" required>*</td>

label标签可以产生级联关系，比如上述表单的性别选项，无添加label标签时，点击“男”，显示的是文字，不勾选。当添加label标签后，点击“男”，也会显示勾选上了单选框

这部分可以自己试试，效果还是非常不错的
<td>
   <label><input type="radio" name="rad" value="rad1">男</label>
   <label><input type="radio" name="rad" value="rad2">女</label>
</td>

details标签可以很有效的展示细节方面的东西，如果运用的好，会让整个页面有一种清明的感觉。

        <details>
            <summary>经典金曲</summary>
            <p>my heart will go on</p>
            <p>take my breath away</p>
        </details>

下面是效果展示
未点击时：
这是未点击状态下的细节框
下面是点击之后的样例：
在这里插入图片描述
select，option标签可以很好的展示下拉框，这里还添加了url部分内容，可供参考。

<select onChange="window.open(this.options[this.selectedIndex].value,'','_blank')">
	<option value="http://www.ujn.edu.cn">济南大学</option>
	<option value="http://www.sina.com.cn">新浪网</option>
	<option value="http://www.163.com">网易</option>
	<option value="http://www.ujn.edu.cn">济南大学</option>
</select>