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

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

二、HTML 表单元素
html——表单元素及个人简历实现_第1张图片
三、HTML 常用表单元素
html——表单元素及个人简历实现_第2张图片
1.HTML 文本输入元素
1.1语法结构

html——表单元素及个人简历实现_第3张图片
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语法结构
html——表单元素及个人简历实现_第4张图片
2.2实现效果
html——表单元素及个人简历实现_第5张图片
3.HTML 复选框元素
3.1语法结构
html——表单元素及个人简历实现_第6张图片
3.2实现效果
html——表单元素及个人简历实现_第7张图片
4.HTML 隐藏域元素
4.1语法结构
html——表单元素及个人简历实现_第8张图片
4.2实现效果
html——表单元素及个人简历实现_第9张图片
5.HTML 表单只读/禁用
5.1语法结构
html——表单元素及个人简历实现_第10张图片
(区别:只读元素值(value)会提交到服务端,而禁用值不会提交到服务端)
5.2实现效果
html——表单元素及个人简历实现_第11张图片
6.HTML 文本区元素
6.1语法结构
html——表单元素及个人简历实现_第12张图片
6.2实现效果
html——表单元素及个人简历实现_第13张图片
7.HTML 下拉选择元素
7.1语法结构
html——表单元素及个人简历实现_第14张图片
7.2实现效果
html——表单元素及个人简历实现_第15张图片
8.HTML 按钮元素
8.1语法结构
html——表单元素及个人简历实现_第16张图片
8.2实现效果
html——表单元素及个人简历实现_第17张图片
四、个人简历实现
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-mailtd>
                <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——表单元素及个人简历实现_第18张图片
五、表单思维导图
html——表单元素及个人简历实现_第19张图片
(别忘了一件三联哦)

你可能感兴趣的:(html)