20180202个人简历,表单
2018-02-02 15:39 王那天 阅读(460) 评论(0) 编辑 收藏 举报个人简历编码:
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>