HTML表格 表单

表格

1.概述：

table：用于定义一个表格

tr ：用于定义表格中的一行

th /td：用于定义表格中的单元格

2.属性：

border:表格边框

cellspacing:单元格与单元格边框之间的空白间距

cellpading:单元格内容与单元格边框之间的空白间距

width:表格宽度
height:表格高度
align:水平对齐方式

3.合并单元格：

rowspan:跨行合并
colspan:跨列合并

表单

1.概述：

表单主要负责数据采集的功能，一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

2.标签：

form标签：用于定义表单域，即创建一个表单，以实现用户信息的收集和传递。

3.属性：

action:表示提交服务器的地址，跳转页面。
method:提交数据方式。
            get:请求参数显示在地址栏，安全性没有post高，请求参数有难度限制。
            post:将数据封装到formData，请求参数没有难度限制。

name:表单提交到服务器数据的名称，单选框需要设置name属性保证单选效果。

4.input控件：

属性	属性值	描述
type	text	文本输入框
	submit	提交按钮
	number	数字输入框
	password	密码输入框
	radio	单选按钮
	button	普通按钮
	reset	重置按钮
	checkbox	复选框
	file	文件域
name	由用户自定义	控件名称
value	由用户自定义	控件中的默认文本值
size	正整数	控件在页面中显示的宽度

 

代码示例：

<div style="text-align: center;">
        <table border="1px" style="margin: auto; width: 700px;">
            <caption>
                <h2>个人简历</h2>
            </caption>
            <tr>
                <td>姓名</td>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td>性别</td>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td>出生年月</td>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td rowspan="4"><input type="file" style="text-align:left;line-height: 0;width: 85px;"></td>
            </tr>
            <tr>
                <td>民族</td>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td>政治面貌</td>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td>身高</td>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
            </tr>
            <tr>
                <td>学制</td>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td>学历</td>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td>户籍</td>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
            </tr>
            <tr>
                <td>专业</td>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td colspan="2">毕业学校</td>
                <td colspan="2">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
            </tr>
            <tr>
                <td colspan="7"><b>技能、特长或爱好</b></td>
            </tr>
            <tr>
                <td>外语等级</td>
                <td colspan="2">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td>计算机</td>
                <td colspan="3">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
            </tr>
            <tr>
                <td colspan="7">个人履历</td>
            </tr>
            <tr>
                <td>时间</td>
                <td colspan="2">单位</td>
                <td colspan="4">经历</td>
            </tr>
            <tr>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td colspan="2">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td colspan="4">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
            </tr>
            <tr>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td colspan="2">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td colspan="4">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
            </tr>
            <tr>
                <td>
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td colspan="2">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td colspan="4">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
            </tr>
            <tr>
                <td colspan="7">联系方式</td>
            </tr>
            <tr>
                <td>通信地址</td>
                <td colspan="2">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td>联系电话</td>
                <td colspan="3">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
            </tr>
            <tr>
                <td>E-mail</td>
                <td colspan="2">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
                <td>邮编</td>
                <td colspan="3">
                    <form action=""><textarea class="input" cols="7" rows="1"></textarea></form>
                </td>
            </tr>
            <tr>
                <td colspan="7">自我评价</td>
            </tr>
        </table>
    </div>