zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    小试SQLServer中的CLR特性
    转:memcached命令行参数说明
    2012年9月19日最新整理的日本产品(日货)名单!
    转:Memcached Java Client API详解
    刚写的一个小案例,实现多选的添加及删除
    SVG中的常用标签
    转:网页启用Gzip压缩 提高浏览速度
    SVG案例:著名的PostScript老虎图片
    SVG文档:SVG编程经典教程(转)
    实用技巧:利用SQL Server的扩展属性自动生成数据字典
  • 原文地址:https://www.cnblogs.com/wangnatian/p/8405487.html
Copyright © 2011-2022 走看看