一、表单的设计

　　1、注册表单页面

<html>

    <head>

        <title>表单的练习</title>

        <script>

            function mousein(){

                var desc=document.getElementById("desc");

                if(desc.value=="请输入描述信息！！！"){

                    desc.value="";

                }

            }

            function mouseout(){

                var desc=document.getElementById("desc");

                if(desc.value==""){

                    desc.value="请输入描述信息！！！";

                }

            }

        </script>

    </head>

    <body>

        <form action="../img/1.jpg" method="GET">

            <table border="1px" align="center" cellpadding="10px" bgColor="pink" borderColor="blue"

             cellspacing="0px">

                <caption><font color="red" size="6px">注册表单</font></caption>

                <tr>

                    <td>用户名：</td>

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

                </tr>

                <tr>

                    <td>密码：</td>

                    <td><input type="password" name="password" /></td>

                </tr>

                <tr>

                    <td>确认密码：</td>

                    <td><input type="password" name="password2" /></td>

                </tr>

                <tr>

                    <td>性别：</td>

                    <td>

                        <input type="radio" name="sex"  value="man"/>男

                        <input type="radio" name="sex" value="women"/>女

                    </td>

                </tr>

                <tr>

                    <td>昵称：</td>

                    <td><input type="password" name="nickname" /></td>

                </tr>

                <tr>

                    <td>邮箱：</td>

                    <td><input type="password" name="email" /></td>

                </tr>

                <tr>

                    <td>爱好：</td>

                    <td>

                        <input type="checkbox" name="hobby"  value="dianying"/>看电影

                        <input type="checkbox" name="hobby"  value="football"/>踢足球

                        <input type="checkbox" name="hobby"  value="basketball"/>打篮球

                        <input type="checkbox" name="hobby"  value="eat"/>美食

                    </td>

                </tr>

                <tr>

                    <td>城市：</td>

                    <td>

                        <select name="city" >

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

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

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

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

                            <option value="nj">南京</option>

                            <option value="wh">武汉</option>

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

                        </select>

                    </td>

                </tr>

                <tr>

                    <td>头像：</td>

                    <td><input type="file" name="picfile" /></td>

                </tr>

                <tr>

                    <td>描述信息：</td>

                    <td>

                        <textarea id="desc" rows="5" cols="50" name="description"

                         onfocus="mousein()" onblur="mouseout()">请输入描述信息！！！</textarea>

                    </td>

                </tr>

                <tr>

                    <td>验证码：</td>

                    <td>

                        <input type="text" name="yanzhengma" />

                        <img width="100px" height="21.33px" src="../img/1.jpg" />

                    </td>

                </tr>

                <tr>

                    <td colspan="2" align="center">

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

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

                    </td>

                </tr>

            </table>

        </form>

    </body>

</html>

注册表单页面

html-表单的设计的更多相关文章

  1. Office365 InfoPath 表单的设计和应用（原创）

    表单的应用:我想到的有2种. 1 做为自定义表单库的模版. 通过发放url(模版链接)给用户来填写表单. 最后将在表单库中得到所有填写的信息列表. 如 2 上传表单做为ContentType 也就是自 ...

  2. [Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例

    转:http://blog.qdac.cc/?p=2197 Axure RP 是个好东东呀,大大方便了程序员与客户之间的前期调研时的交流.不过有一些控制并没有鼠标移入和移出的操作,比如 HTML 按钮 ...

  3. HTML+CSS基础知识（6）背景的设置、表格的设计、表单的设计和框架集

    文章目录 1.背景 1.1 代码 1.2 测试结果 2.背景练习 2.1 代码 2.2 测试结果 3.表格 3.1 代码 3.2 测试结果 4.练习 4.1 代码 4.2 测试结果 5.表单 5.1 ...

  4. Ext开场表单布局设计

    var form = new Ext.form.FormPanel({ labelAlign: 'right', labelWidth: 60, buttonAlign: 'center', titl ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（44）-工作流设计-设计表单

    系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四步. 开始之前先说说表的结构. 其实表Flow_Form与Flow_FormContent设计是有一个缺陷的.我总共是设置最 ...

  6. 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

    基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...

  7. 基于Extjs的web表单设计器 第六节——界面框架设计

    基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...

  8. 基于Extjs的web表单设计器 第五节——数据库设计

    这里列出表单设计器系列的内容,6.7.8节的内容应该在春节后才有时间出了.因为这周末就请假回老家了,准备我的结婚大事.在此提前祝大家春节快乐! 基于Extjs的web表单设计器 基于Extjs的web ...

  9. .NET开源工作流RoadFlow-表单设计-新建表单（属性设置）

    点击表单设计工具栏上的 新建表单 按钮会弹出新表单属性设置框: 表单名称:新表单表名称. 数据连接:表单对应的数据库连接(此连接在 系统管理-->数据库连接 中维护). 数据表:表单对应的数据库 ...

  10. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（44）-工作流设计-设计表单

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单 系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四 ...

随机推荐

  1. 教你搭建SpringSecurity3框架（附源码）

    源码下载地址:http://pan.baidu.com/s/1qWsgIg0 一.web.xml <?xml version="1.0" encoding="UTF ...

  2. 洛谷 P4568 [JLOI2011]飞行路线

    题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n-1,一共有m种航线,每种航线连接两个城市,并且航线有一定的 ...

  3. leetcode 88 Merge Sorted Array 归并排序

    归并排序:先将数组一分为二,将左边部分排序(同样将其一分为二),再将右边部分排序,最后逐层归并.(分治策略)(稳定排序). 算法稳定性 -- 假设在数列中存在a[i]=a[j],若在排序之前,a[i] ...

  4. codeforces1097D Makoto and a Blackboard 数学+期望dp

    题目传送门 题目大意: 给出一个n和k,每次操作可以把n等概率的变成自己的某一个因数,(6可以变成1,2,3,6,并且概率相等),问经过k次操作后,期望是多少? 思路:数学和期望dp  好题好题!! ...

  5. 求一个区间里的一个x，这个x与这区间里面的所有数都互质

    链接:https://ac.nowcoder.com/acm/contest/301/H来源:牛客网 题描述 小乐乐上了一节数学课,数学老师讲的很好,小乐乐听的也如痴如醉. 小乐乐听了老师的讲解,知道 ...

  6. 113th LeetCode Weekly Contest Largest Time for Given Digits

    Given an array of 4 digits, return the largest 24 hour time that can be made. The smallest 24 hour t ...

  7. Oracle utl_file_dir参数详解

    1 UTL_FILE_DIR参数定义 UTL_FILE_DIR是Oracle中的一个"静态参数",可以设置一个或多个路径.用于在PL/SQL中进行文件I/O操作(可以用utl_fi ...

  8. PIE SDK栅格数据的金字塔创建

    1. 功能简介 金字塔可用于改善性能,可以加快栅格数据的显示速度.随着放大操作的进行,各个更精细的分辨率等级将逐渐得到绘制;但性能将保持不变:目前PIE SDK支持栅格数据的金字塔创建,下面对栅格数据 ...

  9. PIE SDK存储格式转换

      1.算法功能简介 影像存储格式转换可以实现栅格数据存储格式的自由转换,其中存储格式可以是 BSQ. BIP. BIL 三种格式. 遥感数字图像数据的存储与分发,通常采用以下三种数据格式: BSQ( ...

  10. Yarn 包管理工具

    已经安装的 yarn add vue vue@2.2.5 yarn add  element-ui -S  yarn add bootstrap@4.0.0-alpha.6 --save   yarn ...