表单与表格的使用

最新推荐文章于 2023-02-09 14:41:26 发布

m0_58822280

最新推荐文章于 2023-02-09 14:41:26 发布

阅读量130

点赞数

分类专栏：表单文章标签： html

本文链接：https://blog.csdn.net/m0_58822280/article/details/117472803

版权

表单专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<form> 元素

HTML 表单用于收集用户输入。

<form> 元素定义 HTML 表单：

实列：

<form>
 .
 .
 .
</form>

定义和用法

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

类型	描述
text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）

文本输入

<input type="text"> 定义用于文本输入的单行输入字段：

实例：

<form>

<input type="text" name="first">
<br>
<hr>
<input type="text" name="last">
</form>

单选按钮输入

<input type="radio"> 定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一：

实列：

<form>
<input type="radio" name="option" value="male" checked>Male
<br>
<input type="radio" name="option" value="female">Female
</form>

效果显示：

提交按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

实列：

<input type="submit" value="选择照片">

效果显示：

项目实战

通过<form> 元素定义 HTML 表单编写一个个人简历页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
</head>
<style>
    input{
        border-width: 0;
    }
</style>
<body>
    <h1 align='center'><b>个人简历</b></h1>
    <form action="">
        <table class="tabtop" width="80%" border="1" cellpadding="1" cellspacing="2" align="center">
            <tr>
                <td class="btbg" >姓名</td>
                <td width="10%" class="btbg"><input type="text" ></td>
                <td width="10%" class="btbg" >性别</td>
                <td width="10%" class="btbg" ><input type="text" ></td>
                <td class="btbg" width="10%">出生日期</td>
                <td colspan="2" class="btbg" width="10%"><input type="text" ></td>
                <td  class="btbg" width="10%" rowspan="3"><input type="submit" value="选择照片"></td>
            </tr>
            <tr>
                <td class="btbg">民族</td>
                <td class="btbg"><input type="text" ></td>
                <td class="btbg">政治面貌</td>
                <td class="btbg"><input type="text" ></td>
                <td class="btbg">身高</td>
                <td class="btbg"><input type="text" ></td>
            </tr>
            <tr>
                <td class="btbg">学制</td>
                <td class="btbg"><input type="text" ></td>
                <td class="btbg">学历</td>
                <td class="btbg"><input type="text" ></td>
                <td class="btbg">户籍</td>
                <td class="btbg"><input type="text" ></td>
            </tr>
            <tr>
                
                <td width="8%" class="btbg">专业</td>
                <td colspan="2" width="8%" class="btbg"><input type="text" ></td>
                <td width="8%" class="btbg">毕业学校</td>
                <td colspan="4" width="8%" class="btbg"><input type="text" ></td>
            </tr>
            <tr>
                <td colspan="8" class="btbg" align="center"><b>技能、特长或者爱好</b></td>
                
            </tr>
            <tr>
                <td width="8%" colspan="2" class="btbg">外语等级</td>
                <td colspan="1" width="8%" class="btbg"><input type="text" width="100%" height="100%5" ></td>
                <td width="8%" colspan="2" class="btbg">计算机</td>
                <td colspan="4" width="8%" class="btbg"><input type="text" ></td>
            </tr>
            <tr>
                <td colspan="8" class="btbg" align="center">个人履历</td>
                
            </tr>
                <tr>
                <td colspan="2" class="btbg">时间</td>
                <td colspan="2" class="btbg">单位</td>
                <td colspan="4" class="btbg">经历</td>
            </tr>
                <tr>
                <td colspan="2" class="btbg"><input type="text" ></td>
                <td colspan="2" class="btbg"><input type="text" ></td>
                <td colspan="4" class="btbg"><input type="text" ></td>
            </tr>
                <tr>
                    <td colspan="2" class="btbg"><input type="text" ></td>
                    <td colspan="2" class="btbg"><input type="text" ></td>
                    <td colspan="4" class="btbg"><input type="text" ></td>
            <tr>
                <td colspan="2" class="btbg"><input type="text" ></td>
                <td colspan="2" class="btbg"><input type="text" ></td>
                <td colspan="4" class="btbg"><input type="text" ></td>
            </tr>
            <tr>
                <td colspan="8" class="btbg" align="center">联系方式</td>
                
            </tr>
                <tr>
                <td colspan="1" class="btbg">通信地址</td>
                <td colspan="3" class="btbg"><input type="text" ></td>
                <td colspan="1" class="btbg">联系电话</td>
                <td colspan="3" class="btbg"><input type="text" ></td>
            </tr>
                <tr>
                <td colspan="1" class="btbg">E-mail</td>
                <td colspan="3" class="btbg"><input type="text" ></td>
                <td colspan="1" class="btbg">邮编</td>
                <td colspan="3" class="btbg"><input type="text" ></td>
            </tr>
            <tr>
                <td colspan="8" class="btbg"  align="center">自我评价</td>
                
            </tr>
            <tr>
                <td colspan="8" class="btbg" ><textarea rows="10" cols="170%"></textarea></td>
            </tr>
            
           
        </table>
      
     
    </form>
  
</body>
</html>