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. 【LeetCode】1、Two Sum

    题目等级:Easy 题目描述:   Given an array of integers, return indices of the two numbers such that they add u ...

  2. Array.prototype.slice.call()的理解

    最近在看廖雪峰的JS课程,浏览器中的操作DOM的那一章,有这样一道题. JavaScript Swift HTML ANSI C CSS DirectX <!-- HTML结构 --> & ...

  3. 洛谷——P3906 Geodetic集合

    P3906 Geodetic集合 题目描述 图G是一个无向连通图,没有自环,并且两点之间至多只有一条边.我们定义顶点v,u最短路径就是从v到u经过边最少的路径.所有包含在v-u的最短路径上的顶点被称为 ...

  4. Vector 和 Array 区别

    1:array 定义的时候必须定义数组的元素个数;而vector 不需要:且只能包含整型字面值常量,枚举常量或者用常量表达式初始化的整型const对象, 非const变量以及需要到运行阶段才知道其值的 ...

  5. HDU 4027（线段树）

    HDU4027 题意:操作指令为0时,对区间[x,y]之间的数字进行开平方:指令为1的时候,对区间[x,y]之间的数字求和并输出: 思路:线段树处理就OK了,但是64位内的数最多开8次平方就为1了(开 ...

  6. Linux自动化之基于http的pxe安装服务

    PXE:     Preboot Excution Environment 预启动执行环境     Intel公司研发     基于Client/Server的网络模式,支持远程主机通过网络从远端服务 ...

  7. wget扒网站

    wget神奇操作   整站复制 只限静态网页 wget -P 指定下载路径 -p 获取显示HTML页面所需的所有图像 -k  使链接指向本地文件 -H  递归时转到外部主机. wget --mirro ...

  8. web开发如何使用高德地图API（四）通过AMap.Marker自定义标点

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

  9. HDU - 3556 - Continued Fraction

    先上题目: Continued Fraction Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Jav ...

  10. 接水问题（2010年NOIP全国联赛普及组）

    时间限制: 1 s    空间限制: 128000 KB 题目描述 Description 学校里有一个水房,水房里一共装有m 个龙头可供同学们打开水,每个龙头每秒钟的供水量相等,均为1. 现在有n ...