一、表单的设计

　　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. npm install时 报错Maximum call stack size exceeded

    给npm降级或者升级 降级 : npm install -g npm@5.4.0 升级 : npm install -g npm  升级到最新版

  2. PIE SDK栅格图层渲染变化事件监听

    1. 功能简介 通过PIE SDK加载图层后,会默认的赋值给数据一个渲染.当用户重新给数据赋值Render或改变数据显示效果时,会触发渲染变化事件. 所谓的事件监听是在事件触发时,将执行用户指定的函数 ...

  3. MySQL主从复制，以及双机热备

    MySQL数据库自身提供的主从复制功能可以方便的实现数据的多处自动备份,实现数据库的拓展.多个数据备份不仅可以加强数据的安全性,通过实现读写分离还能进一步提升数据库的负载性能. 下图就描述了一个多个数 ...

  4. jdk监控tomcat

    一, tomcat配置文件 在tomcat的配置文件中添加被监控的项 #在tomcat配置文件中开启监控功能 vim /application/tomcat/bin/catalina.sh +97 C ...

  5. 一个优秀的app应该考虑的问题

    带着团队做了3个app,需求是客户决定的,甚至连进度都不是项目经理可以控制的(譬如说一个app要在6周内,3个人完成).现在的状态是基本上没有用户量,当然原因是多方面的,下面说一说我认为app设计的原 ...

  6. Django 入门项目案例开发（上）

    关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. Django 入门案例开发(中) http://www.cnblogs.com/focusBI ...

  7. 新版本火狐 ，Chrome不支持showModalDialog解决办法

    平常的网站中,有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口,在IE中,我们可以使用showModalDialog来达成,但是chrome早就不支持showModalDialog,最近 ...

  8. .net 金额中文大写 日期转中文

    金额中文大写 #region 中文大写 /// <summary> /// 返回中文数字 ,如壹佰元整 /// </summary> /// <param name=&q ...

  9. ASP.NET内置对象-网页转向的4中方法

    ASP.NET页面跳转的方法 1.超链接 2.Response.Redirect(“Urlstring”) 3.Server.Transfer(“UrlString”) 4.PostBackUrl 1 ...

  10. oracle 常用操作记录--持续更新...

    一.oracle grant 授权语句(转自:https://www.cnblogs.com/yt954437595/p/6488819.html) --select * from dba_users ...