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>    <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><td ><input type="text"></td><td align="center">出生年月</td><td ><input type="text"></td><td rowspan="4" width="100"><input type="file" style="font-weight:bold;"></td></tr><!--第二行--><tr><td align="center">民族</td><td><input type="text"></td><td align="center">政治面貌</td><td><input type="text"></td><td align="center">身高</td><td><input type="text"></td></tr><!--第三行--><tr><td align="center">学制</td><td ><input type="text"></td><td align="center">学历</td><td><input type="text"></td><td align="center">户籍</td><td ><input type="text"></td></tr><!--第四行--><tr><td align="center">专业</td><td><input type="text"></td><td align="center" colspan = "2">毕业学校</td><td colspan = "2"align="center"><input type="text"style="width: 97%; height: 100%"></td></tr><!--第五行--><tr><td align="center" colspan = "7">技能、特长或爱好</td></tr><!--第六行--><td align="center">外语等级</td><td colspan = "2"><input type="text"style="width: 97%; height: 100%"></td><td align="center">计算机</td><td colspan = "3"><input type="text"style="width: 97%; height: 100%"></td><!--第七行--><tr><td align="center" colspan = "7">个人履历</td></tr><!--第八行--><tr><td align="center">时间</td><td colspan = "2"align="center">单位</td><td colspan = "4"align="center">经历</td></tr><!--第九行--><tr><td ><input type="text"></td><td colspan = "2" ><input type="text"style="width: 98%; height: 100%"></td><td colspan = "4"><input type="text"style="width: 98%; height: 100%"></td>    </tr><!--第十行--><tr><td ><input type="text"></td><td colspan = "2" ><input type="text"style="width: 98%; height: 100%"></td><td colspan = "4"><input type="text"style="width: 98%; height: 100%"></td>   </tr><!--第十一行--><tr><td ><input type="text"></td><td colspan = "2" ><input type="text"style="width: 98%; height: 100%"></td><td colspan = "4"><input type="text"style="width: 98%; height: 100%"></td>   </tr><!--第十二行--><tr><td align="center" colspan = "7">联系方式</td></tr><!--第十三行--><tr><td align="center">通信地址</td><td colspan = "2"><input type="text"style="width: 98%; height: 100%"></td><td align="center">联系电话</td><td colspan = "3"><input type="text"style="width: 98%; height: 100%"></td></tr><!--第十四行--><tr><td align="center">E-mail</td><td colspan = "2"><input type="text"style="width: 98%; height: 100%"></td><td align="center">邮编</td><td colspan = "3"><input type="text"style="width: 98%; height: 100%"></td></tr><!--第十五行--><tr><td align="center" colspan = "7">自我评价</td></tr><!--第十六行--><tr><td colspan="7"><textarea name= "myBrief" cols="7" rows="4"style="width: 99%; height: 100%"></textarea></td></tr></table>   </form> </body>
</html>

4.2实现效果

五、表单思维导图

（别忘了一件三联哦）

html——表单元素及个人简历实现相关推荐

html5表单实例元素,HTML5新表单元素的图文实例-
这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...
【2018-01-22】HTML-表单及表单元素
<body><form action="" method="post">& ...
5 select 选择的值_表单元素之选择类型
表单元素的选择类型可以分为三种: 单选多选下拉单选和复选框的属性值可以有两个:disabled(不可操作的) 和 checked. 下拉框的属性值可以是:selected(默认选中) .mult ...
css label 居中布局_HTMLCSS精华知识点——表单元素、BFC、两栏布局、居中总结等...
HTML&CSS精华知识点--第九节一.input表单元素一系列元素,主要用于收集用户数据 1.type属性表示输入框类型text:普通文本输入框 date,日期选择框,兼容性问题 sea ...
(总结1)HTML5中新增加的表单元素
HTML5中新增加了很多元素标签使用,在经过了近一星期多的学习之后现在进行一下总结,方便日后查阅: H5中的智能表单 1 <form action=""> 2 < ...
顶部对齐css表单,vertical-align 表单元素垂直对齐的解决方法
如下图所示: 于是上网查看了一些网站,发现这个问题是普遍存在的,如下图(FF3.5): 在很多网站涉及到表单的页面中,都存在这种表单元素与提示文字无法对齐的问题.于是打算研究一下这个问题.首先,搜索到 ...
给自己提个醒：关于document.getElementsByName无法获取非表单元素
document.getElementsByName自己一厢情愿以为可以获取所有元素,以前也碰到过,但是不长记性,还是记录下来比较好. document.getElementsByName只能获取表单 ...
HTML（三）：表单元素
表单元素概述表单(Form),用于收集用户信息.提交用户请求等处理过程 1.设计表单,并放入一些输入域 2.网站访问者在自己的计算机上填写上述输入域,并提交到服务器 ...
JS 表单和表单元素
JS:The Definitive Guide 例18-1,列举了所有的表单元素,并把表达的相关操作都呈现出来,非常的好!不愧为一本经典的书籍.例子非常恰当. <!DOCTYPE HTML> ...

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

html——表单元素及个人简历实现相关推荐

最新文章

热门文章