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. jquery制作动态添加表单行与删除表单行

    <script type="text/javascript" src="js/jquery1.7.js"></script> <s ...

  2. json 添加 和删除两种方法

    <script> var test = { name: "name", age: "12" }; var countrys = { "ne ...

  3. Linux下的find命令

    Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.即使系统中含有网络文件系统,find命令在该文件系统中同样有效.在运行一个非 ...

  4. 针对mdadm的RAID1失效测试

    背景 对软RAID(mdadm)方式进行各个场景失效测试. 一.初始信息 内核版本: root@omv30:~# uname -a Linux omv30 4.18.0-0.bpo.1-amd64 # ...

  5. [Bzoj4195] [NOI2015] 程序自动分析 [并查集，哈希，map] 题解

    用并查集+离散化,注意:并查集数组大小不是n而是n*2 #include <iostream> #include <algorithm> #include <cstdio ...

  6. [bzoj2743][HEOI2012]采花_树状数组

    采花 bzoj-2743 HEOI-2012 题目大意:给定n朵花,每朵花有一个种类,m次询问:一段区间中至少出现两朵花的种类的个数. 注释:$1\le n,m\le10^6$. 想法:这个题超级像H ...

  7. 洛谷——P2347 砝码称重

    https://www.luogu.org/problem/show?pid=2347#sub 题目描述 设有1g.2g.3g.5g.10g.20g的砝码各若干枚(其总重<=1000), 输入输 ...

  8. F2BPM作流引擎系列索引

    索引如下 F2工作流引擎遵循参考WFCM标准规范,符合中国国情特色,更轻量级的工作流引擎,支持多种数据库(mmsqlserver,mysql,oracle),有强大智能的组织模型接口可快速应用到任何基 ...

  9. MSSQL的表备份成INSERT脚本的存储过程

    USE [SupplyChain]GO/****** Object: StoredProcedure [dbo].[ExpData] Script Date: 2015-12-18 10:23:08 ...

  10. [MongoDB]安装 MongoDB 数据库

    1.tar zxvf mongodb.tgz 2.vim ~/.bashrc  增加 MONGODB_HOME 并添加bin到PATH ,source ~/.bashrc 3.mongod -vers ...