20180202个人简历,表单

个人简历编码:

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>个人简历</title>
 6 </head>
 7 
 8 <body>
 9 <table border="10xp" width="500xp" height="600xp" cellpadding="10px" cellspacing="0px">
10 <caption>个人简历</caption>
11 <tr>
12 <td>姓名</td>
13 <td>王龙翔</td>
14 <td>性别</td>
15 <td></td>
16 <td rowspan="3"><img src="img/logo5.jpg" ></td>
17 </tr>
18 <tr>
19 <td>出生年月</td>
20 <td>1991-9-5</td>
21 <td>民族</td>
22 <td></td>
23 
24 </tr>
25 <tr>
26 <td>学历</td>
27 <td>本科</td>
28 <td>专业</td>
29 <td>传媒</td>
30 
31 </tr>
32 <tr>
33 <td>毕业院校</td>
34 <td colspan="4">河海大学</td>
35 
36 </tr>
37 <tr>
38 <td>联系电话</td>
39 <td>15305333225</td>
40 <td>电子邮箱</td>
41 <td colspan="2">409000401@qq.com</td>
42 
43 </tr>
44 <tr>
45 <td>教育经历</td>
46 <td colspan="4">河海大学</td>
47 
48 </tr>
49 <tr>
50 <td>所获证书</td>
51 <td colspan="4">英语<br>计算机</td>
52 
53 </tr>
54 <tr>
55 <td>在校期间进行的实践活动</td>
56 <td colspan="4">热爱劳动</td>
57 
58 </tr>
59 <tr>
60 <td>个人自述</td>
61 <td colspan="4">为人民服务</td>
62 
63 </tr>
64 </table>
65 </body>
66 </html>

下午学习的新内容:

单选按钮 radio

html中,单选按钮radio只能从选项列表中选择一项,选项与选项之间是互斥的。

语法:

<input type="radio name="单选按钮所在的组名" value="单选按钮的取值" />

说明:

name和value是单选按钮必要的两个属性,必须要设置。

复选框checkbox

单选按钮radio只能从选项列表中选择一项,而复选框checkbox可以从选项列表中选择一项或者多项。

语法:

<input type="checkbox" value="复选框取值" checked="checked"/>

说明:

checked属性表示该选项在默认情况下已经被选中。复选框checkbox不像单选按钮radio,它不需要设置选项列表的name,因为复选框可以多选。

<!--
<form action="提交的地址" method="提交的方式(默认GET方式)"
表单元素
</form>
提交方式:
get方式:路径?键=值& 键=值
缺点:不安全,传输内容大小有限制
post方式:
表单元素通用格式:<input type=表单元素的类型"name"键 value=值
表单元素的类型:
文本类型:
文本框:text plaeholder未输入之前显示字符
密码框:password
隐藏yu域:hidden
按钮类型:
普通按钮:button
重置按钮:reset (必须写在form标签里面)
提交按钮:submit
选择类型:
单选:radio
注意:需要用name属性进行分组
多选:checkbox
label标签点汉字勾选
默认选中checked
不可选中disabled
上传以前编码方式 不编码enctype="multipart/form-data"

下拉框
<select>
<option>选项内容1</option>
<option>选项内容2</option>
<option>选项内容3</option>
mu
selected 默认首选
</select>
文本域
<textarea></textarea>
-->

练习1:

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>表单</title>
  6 </head>
  7 
  8 <body>
  9 
 10 <form action="" enctype="multipart/form-data">
 11 用户名:<input type="text" name="username" placeholder="输入用户名">
 12 密码框:<input type="password" name="pwd">
 13 隐藏域:<input type="hidden"><br>
 14 普通按钮:<input type="button" value="普通按钮"><br>
 15 
 16 重置按钮:<input type="reset" value="重置"><br>
 17 
 18 提交按钮:<input type="submit" value="提交"><br>
 19 
 20 性别:<label><input type="radio" name="sex"></label>
 21 <label><input type="radio" name="sex" checked></label><br>
 22 
 23 爱好:<label>篮球<input type="checkbox" name="lanqiu"></label>
 24 <label>足球<input type="checkbox" name="zuqiu" disabled></label>
 25 <label> 排球<input type="checkbox" name="paiqiu" checked></label>
 26 <br>
 27 上传文件<input type="file">
 28 地区:<select>
 29 <option>淄博</option>
 30 <option>济南</option>
 31 <option selected>青岛</option>
 32 <option>枣庄</option>
 33 </select><br>
 34 
 35 个人简介:<br>
 36 <textarea name="" id="" cols="30" rows="10">
 37 
 38 </textarea>
 39 </form>
 40 </body>
 41 </html>
 42 
 43 练习2:博客园登录界面
 44 
 45 <!doctype html>
 46 <html>
 47 <head>
 48 <meta charset="utf-8">
 49 <title>无标题文档</title>
 50 </head>
 51 
 52 <body>
 53 <form>
 54 <table border="0xp" width="950" height="" align="center">
 55 <tr>
 56 <td colspan="4">注册新用户</td>
 57 
 58 </tr>
 59 <hr>
 60 <tr>
 61 <th>邮箱</th>
 62 
 63 <td colspan="2"><input type="text" placeholder="需要通过邮件激活账户"></td>
 64 
 65 <td rowspan="6"><img src="../作业2/img/registersideimg.png" alt=""></td>
 66 
 67 </tr>
 68 <tr>
 69 <th>手机号</th>
 70 <td><input type="text" value="+86"></td>
 71 <td><input type="text" placeholder="激活账号需要手机短信验证"></td>
 72 
 73 
 74 </tr>
 75 <tr>
 76 <th>登录名称</th>
 77 <td colspan="2"><input type="text" placeholder="登录用户名,不少于4个字符"></td>
 78 
 79 
 80 
 81 </tr>
 82 <tr>
 83 <th>显示名称</th>
 84 <td colspan="2"><input type="text" placeholder="即昵称,不少于两个字符"></td>
 85 
 86 
 87 </tr>
 88 <tr>
 89 <th>密码</th>
 90 <td colspan="2"><input type="text" placeholder="至少8位,必须包含字母,数字,特殊字符"></td>
 91 
 92 
 93 
 94 </tr>
 95 <tr>
 96 <th>确认密码</th>
 97 <td colspan="2"><input type="text" placeholder="请输入确认密码"></td>
 98 
 99 
100 
101 </tr>
102 <tr>
103 <td colspan="4" align="center"><input type="submit" value="注册"></td>
104 
105 
106 </tr>
107 <tr>
108 <td colspan="4" align="center"><small>*"注册"按钮,即表示您同意并愿意遵守<a href="">用户协议</a></small></td>
109 
110 
111 </tr>
112 <tr>
113 <td colspan="4" align="center"><h5>关于博客园 联系我们 @2014-2018 博客园 保留所有权力 powered by ASP.NET core on linux</h5></td>
114 
115 
116 </tr>
117 
118 </table>
119 </form>
120 </body>
121 </html>
原文地址:https://www.cnblogs.com/wangnatian/p/8405487.html