HTML------表单元素

最新推荐文章于 2023-08-13 17:38:03 发布

xaiozhu`s code

最新推荐文章于 2023-08-13 17:38:03 发布

阅读量586

点赞数 11

分类专栏： HTML 文章标签： html html5

本文链接：https://blog.csdn.net/zy12344321/article/details/117481330

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、HTML表单简介

1.表单是html文档中的一个区域。
2.表单中包含了一系列可交互的元素。
3.表单主要用于收集用户信息。

二、表单元素

三、HTML常用表单元素

四、文本输入元素

1.文本输入语速结构：

2.文本输入元素---文本/密码：

代码示例：

<html>
…
<body>
    <form action=“#” method=“post”>    
        <h1>系统登录</h1>    
        <div>用户名称：        
           <input type="text" name="username">    
       </div>    
        <div>登录密码：        
            <input type="password" name="password">    
       </div>
    </form> 
</body>
</html>

五、单选框元素

1.单选框示例代码及效果

六、复选框元素

1.复选框元素代码示例及效果

七、隐藏域元素

1.隐藏域元素代码示例及效果

八、表单只读/禁用

1.表单只读和禁用属性代码示例及效果

九、文本区输入元素

1.文本区输入元素代码示例及效果

十、下拉选择元素

1.下拉选择元素代码示例及效果

十一、按钮元素

1.按钮元素代码示例及效果

十二、个人简历网页表格案例

1.代码如下：

<!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>

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

        </table>
    </form>
</body>

</html>

2.运行效果如图：