一、表单的设计

　　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. 选择排序 Selection Sort

    选择排序 Selection Sort 1)在数组中找最小的数与第一个位置上的数交换: 2)找第二小的数与第二个位置上的数交换: 3)以此类推 template<typename T> / ...

  2. 江西理工大学南昌校区排名赛 C: 单身狗的地图游戏

    题目描述 萌樱花是一只单身狗. 萌樱花今天决定去喜欢的学妹家玩,但他不记得路,于是他拿出有n个点的完全图,选取了k条不同的路. 完全图:n 个点的图中任意两个点之间都有一条边相连,所以有 n*(n-1 ...

  3. 简单易懂的VS-CODE C++环境配置(ACM向)

    网上教程比较繁琐,他们似乎要把vs-code变得无所不能,而我只是想代替dev进行简单的输入输出 所以大概花了1个多小时找到了能用的方法(中途还搞了个ubuntu子系统发现没啥用) 这里随便说下 1. ...

  4. [转] JQuery UI Tabs 动态添加页签，并跳转到新页签

    [From] https://blog.csdn.net/zhangfeng2124/article/details/76672403 需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添 ...

  5. 在Maven打包war的时候包含空目录/空文件夹

    Maven打包的时候貌似默认会忽略空的文件夹,如果需要包含他们,则需要添加如下的插件配置: <plugins> <plugin> <artifactId>maven ...

  6. java中的集合：继承关系和简介

    1.继承关系图 2.Collection接口 Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements).一些Collect ...

  7. PMP 变更的流程

    变更的流程: 内部变更: (团队成员提出)团队成员提出的变更,原则上拒绝,如果对客户和自己方都有好处不能拒绝1.内部变更 先分析影响 >> 2. 再提出变更请求 >> 3.变更 ...

  8. Vue.js插槽slot和作用域插槽slot-scope学习小结

    一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...

  9. XLua 网络加载（基础操作）

    LoadGameMethod  网上资源加载更新:加载场景中另建协程用来加载; public void LoadGameMethod() { StartCoroutine(start());      ...

  10. 018-面向接口编程的BeanFactory模板代码

    1 BeanFactory工具类 package www.test.utils; import org.dom4j.Document; import org.dom4j.Element; import ...