01.表单的代码实现

 <!DOCTYPE html>

 <html>

     <head>

         <title>世纪佳缘，你在我也在</title>

     </head>

     <body>

         <table width="600" border="0" align="center">

             <caption>

                 <h4>青春不常在，抓紧谈恋爱</h4>

             </caption>

             <!--选择性别-->

             <tr>

                 <td>性别</td>

                 <td>

                     <input type="radio" name="sex" checked="checked">男 <img src="data:images/man.jpg"><input type="radio" name="sex">女 <img src="data:images/women.jpg">

                 </td>

             </tr>

             <!--选择生日-->

             <tr>

                 <td>生日</td>

                 <td>

                     <select name="" id="">

                         <option value="">请选择年</option>

                         <option value="">2018年</option>

                         <option value="">2017年</option>

                         <option value="">2016年</option>

                         <option value="">2015年</option>

                         <option value="">2014年</option>

                         <option value="">2013年</option>

                         <option value="">2012年</option>

                         <option value="">2011年</option>

                         <option value="">2010年</option>

                         <option value="">2009年</option>

                     </select>

                     <select name="" id="">

                         <option value="">请选择月</option>

                         <option value="">1月</option>

                         <option value="">2月</option>

                         <option value="">3月</option>

                         <option value="">4月</option>

                         <option value="">5月</option>

                         <option value="">6月</option>

                         <option value="">7月</option>

                         <option value="">8月</option>

                         <option value="">9月</option>

                         <option value="">10月</option>

                         <option value="">11月</option>

                         <option value="">12月</option>

                     </select>

                     <select name="" id="">

                         <option value="">请选择日</option>

                         <option value="">1日</option>

                         <option value="">2日</option>

                         <option value="">3日</option>

                         <option value="">4日</option>

                         <option value="">5日</option>

                         <option value="">6日</option>

                         <option value="">7日</option>

                         <option value="">8日</option>

                         <option value="">9日</option>

                         <option value="">10日</option>

                         <option value="">11日</option>

                         <option value="">12日</option>

                         <option value="">13日</option>

                         <option value="">14日</option>

                         <option value="">15日</option>

                         <option value="">16日</option>

                         <option value="">17日</option>

                         <option value="">18日</option>

                         <option value="">19日</option>

                         <option value="">20日</option>

                         <option value="">21日</option>

                         <option value="">22日</option>

                         <option value="">23日</option>

                         <option value="">24日</option>

                         <option value="">25日</option>

                         <option value="">26日</option>

                         <option value="">27日</option>

                         <option value="">28日</option>

                         <option value="">29日</option>

                         <option value="">30日</option>

                         <option value="">31日</option>

                     </select>

                 </td>

             </tr>

             <!--选择籍贯-->

             <tr>

                 <td>籍贯</td>

                 <td>

                     <select name="" id="">

                         <option value="">北京</option>

                         <option value="">上海</option>

                         <option value="">广州</option>

                         <option value="">深圳</option>

                         <option value="" selected="selected">成都</option>

                         <option value="">海南</option>

                         <option value="">重庆</option>

                         <option value="">云南</option>

                         <option value="">辽宁</option>

                         <option value="">广西</option>

                         <option value="">杭州</option>

                     </select>

                 </td>

             </tr>

             <!--选择所在地区-->

             <tr>

                 <td>所在地区</td>

                 <td><input type="text" value="北京" name=""></td>

             </tr>

             <!--选择婚姻状况-->

             <tr>

                 <td>婚姻状况</td>

                 <td>

                     <input type="radio" name="marry">未婚

                     <input type="radio" name="marry">已婚

                     <input type="radio" name="marry">丧偶

                 </td>

             </tr>

             <!--选择学历-->

             <tr>

                 <td>学历</td>

                 <td>

                     <input type="text" value="小学">

                 </td>

             </tr>

             <!--选择月薪-->

             <tr>

                 <td>月薪</td>

                 <td>

                     <input type="text" value="5000-10000">

                 </td>

             </tr>

             <!--填写手机号码-->

             <tr>

                 <td>手机号</td>

                 <td>

                     <input type="text">

                 </td>

             </tr>

             <!--填写昵称-->

             <tr>

                 <td>昵称</td>

                 <td><input type="text"></td>

             </tr>

             <!--<tr>

                 <td>密码</td>

                 <td><input type="password" value="111111" </td>

             </tr>-->

             <!--选择喜欢的类型-->

             <tr>

                 <td>喜欢的类型</td>

                 <td>

                     妩媚<input type="checkbox" name="love">

                     安静<input type="checkbox" name="love">

                     小鲜肉<input type="checkbox" name="love">

                     气质<input type="checkbox" name="love">

                 </td>

             </tr>

             <!--进行自我介绍-->

             <tr>

                 <td>自我介绍</td>

                 <td>

                     <textarea name="" id="" cols="50" rows="10"></textarea>

                 </td>

             </tr>

             <tr>

                 <td></td>

                 <td>

                     <input type="image" src="data:images/btn.png">

                 </td>

             </tr>

             <tr>

                 <td></td>

                 <td>

                     <input type="checkbox" checked="checked">

                     我同意注册条款和会员加入标准

                 </td>

             </tr>

             <tr>

                 <td></td>

                 <td>

                     <a href="#"><h5>我是会员，立即登陆</h5></a>

                 </td>

             </tr>

             <tr>

                 <td></td>

                 <td>

                             <h3>我承诺</h3>

                     <ul>

                         <li>年满18岁、单身</li>

                         <li>抱着严肃的态度</li>

                         <li>真诚寻找另一半</li>

                     </ul>

                 </td>

             </tr>

             <tr>

                 <td>上传头像</td>

                 <td>

                     <input type="file" >

                 </td>

             </tr>

             <tr>

                 <td></td>

                 <td>

                     <!--<input type="button" value="注册">-->

                     <input type="submit" value="提交">

                     <input type="reset" value="重置">

                     <!--<input type="image" src="data:images/btn.png">-->

                 </td>

             </tr>

         </table>

     </body>

 </html>

代码实现

运行结果：

02.表单的目的是收集用户信息。

03.表单由表单控件（表单元素）、提示信息、表单域三个部分组成。

04.input控件：

input表单（02）的更多相关文章

  1. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  2. 不让input表单的输入框保存用户输入的历史记录

    如何不让input表单的输入框保存用户输入的历史记录.  有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 <input name="test&quo ...

  3. input type类型和input表单属性

    一.input type类型 1.Input 类型 - email 在提交表单时,会自动验证 email 域的值. E-mail: <input type="email" n ...

  4. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  5. JavaWeb后台从input表单获取文本值的两种方式

    JavaWeb后台从input表单获取文本值的两种方式 #### index.html <!DOCTYPE html> <html lang="en"> & ...

  6. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

  7. 让input表单输入框不记录输入过信息的方法

    有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input文本输入框会记录下之前提交表单的信息,以后每次只要双击input文本输入框就会出现之前输入的文本,这样有时会觉得比较方 ...

  8. mui弹出输入法遮住input表单元素

    转自https://www.cnblogs.com/devilyouwei/p/6293190.html mui弹出输入法遮住input表单元素   问题如下:当我用mui开发app时,在mui-sc ...

  9. 自定义常用input表单元素三：纯css实现自定义Switch开关按钮

    自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...

  10. react中使用Input表单双向绑定方法

    input react 表单 input 密码框在谷歌浏览器下 会有黄色填充 官网的不太用,这个比较好用 type="password" autoComplete="ne ...

随机推荐

  1. Luogu P2068 统计和

    P2068 统计和 题目描述 给定一个长度为n(n<=100000),初始值都为0的序列,x(x<=10000)次的修改某些位置上的数字,每次加上一个数,然后提出y (y<=1000 ...

  2. Qt Creator 中文乱码问题

    一. Qt 4 乱码问题 解决方案 1. 在Qt 中 快捷菜单选项功能中 Edit(编辑)  --> Select Encoding...(选择编码) 选择载入(显示)编码和储存编码,要解决中文 ...

  3. C++关键字：重学记录

    const_cast dynamic_cast explicit

  4. BZOJ 1051 HAOI 2006 受欢迎的牛

    [题解] 先用tarjan缩点,然后如果某个强联通分量的出度为0,则该强联通分量内的点数为答案,否则无解.因为若其他所有的强联通分量都有边连向Ai,则Ai必定没有出边,否则Ai连向的点所属的强联通分量 ...

  5. AndroidTreeView：Android树形节点View

     AndroidTreeView:Android树形节点View AndroidTreeView是github上的一个第三方开源项目,其在github上的项目主页是:https://github. ...

  6. Groovy简单再入门

    以前试过,忘得差不多了,趁这次从JAVA一直撸到SERVLET,SPRING,GROOVY,GRAILS的机会,再弄一次吧... def authors = [ "Peter Ledbroo ...

  7. 搭建LVS+Keepalived负载均衡集群

    这两天学习了LVS+Keepalived负载均衡的搭建.网上的教程非常多,可是动起手来遇到不少问题. 如今把自己的搭建过程以及遇到的一些问题给分享下. 硬件环境: Macbook 8G内存.250G ...

  8. 微信 创建自定义菜单 向微信发起的post请求

    微信 创建自定义菜单 向微信发起的post请求 Map<String, Object> res = new HashMap<String, Object>(); try { S ...

  9. Android之——AsyncTask和Handler对照

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46952835 AsyncTask和Handler对照 1 ) AsyncTask实 ...

  10. 使用Linq 查询数据 构建对象 select new{}

    linq 查询数据 /// <summary> /// 汽车品牌及车型 /// </summary> /// <returns></returns> p ...