html——表单元素及个人简历实现

最新推荐文章于 2024-07-25 11:52:08 发布

衣冠小兽

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量1.2k

点赞数 11

文章标签： html

本文链接：https://blog.csdn.net/maojiaolin/article/details/117484838

版权

一、HTML 表单简介1.HTML 表单是 HTML 文档中的一个区域2.HTML 表单这个区域中包含了一系列的可交互元素3.HTML 表单主要用于收集用户输入信息二、HTML 表单元素三、HTML 常用表单元素1.HTML 文本输入元素1.1语法结构1.2实例代码<html>…<body> <form action=“#” method=“post”> <h1>系统登录</h1>

摘要由CSDN通过智能技术生成

一、HTML 表单简介
1.HTML 表单是 HTML 文档中的一个区域
2.HTML 表单这个区域中包含了一系列的可交互元素
3.HTML 表单主要用于收集用户输入信息

二、HTML 表单元素
在这里插入图片描述
三、HTML 常用表单元素

1.HTML 文本输入元素
1.1语法结构

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>

2.HTML 单选框元素
2.1语法结构
在这里插入图片描述
2.2实现效果

3.HTML 复选框元素
3.1语法结构

3.2实现效果

4.HTML 隐藏域元素
4.1语法结构

4.2实现效果

5.HTML 表单只读/禁用
5.1语法结构

（区别：只读元素值(value)会提交到服务端，而禁用值不会提交到服务端）
5.2实现效果
在这里插入图片描述
6.HTML 文本区元素
6.1语法结构

6.2实现效果

7.HTML 下拉选择元素
7.1语法结构

7.2实现效果

8.HTML 按钮元素
8.1语法结构

8.2实现效果

四、个人简历实现
4.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=“#” method=“post”> 
        <table border="1"align="center">
            <!--表头-->
            <h1 align="center">个人简历</h1>
            <!--第一行-->
            <tr>
                <td align="center">姓名</td>
                <td ><input type="text"></td>
                <td align="center">性别</td

最低0.47元/天解锁文章

衣冠小兽

关注

11
点赞
踩
15

收藏

觉得还不错? 一键收藏
3
评论
html——表单元素及个人简历实现

一、HTML 表单简介1.HTML 表单是 HTML 文档中的一个区域2.HTML 表单这个区域中包含了一系列的可交互元素3.HTML 表单主要用于收集用户输入信息二、HTML 表单元素三、HTML 常用表单元素1.HTML 文本输入元素1.1语法结构1.2实例代码<html>…<body> <form action=“#” method=“post”> <h1>系统登录</h1>
复制链接

扫一扫