一、表单的设计

　　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. POJ_1284 Primitive Roots 【原根性质+欧拉函数运用】

    一.题目 We say that integer x, 0 < x < p, is a primitive root modulo odd prime p if and only if t ...

  2. 解决Android SDK Manager 更新下载慢以及待安装包列表不显示

    问题描述: Android SDK Manager 无法下载更新,或者更新速度超慢,或者待安装包列表不显示 解决方法: 第一步:修改hosts文件 修改后的hosts 文件内容为: 127.0.0.1 ...

  3. SQL注入(过滤空格和--+等注释符)

    1.地址:http://ctf5.shiyanbar.com/web/index_2.php(过滤了空格和--+等注释符) 思路:确定注入参数值类型,直接输入单引号,根据报错信息确定参数值类型为字符型 ...

  4. Vue 项目启动抛出 Error/ No PostCSS Config found in

    项目启动时抛出 Error: No PostCSS Config found in … 的错误表示某个 css 文件不能被引入 解决办法: module.exports = { plugins: { ...

  5. GreenPlum 大数据平台--非并行备份(六)

    一,非并行备份(pg_dump) 1) GP依然支持常规的PostgreSQL备份命令pg_dump和pg_dumpall 2) 备份将在Master主机上创建一个包含所有Segment数据的大的备份 ...

  6. filter 静态资源

    package com.itheima.web.filter; import java.io.IOException; import javax.servlet.Filter; import java ...

  7. 解决eclipse中org.w3c.dom.Node类老报The method getTextContent() is undefined 问题

    http://www.cnblogs.com/itspy007/articles/4431581.html

  8. 10 个最佳的 Node.js 的 MVC 框架

    补充:http://nokit.org/ https://thinkjs.org/zh-cn/doc/index.html Node.js 是一个基于Chrome JavaScript 运行时建立的一 ...

  9. HashTable 元素的查找

    Hashtable 特点:键与值成对存在,键是唯一的,不能重复.在查找元素的时候,我们往往是依据键区查找值的 三种方法 contains   包含 containsKey containsValue ...

  10. vscode插件推荐

    在扩展(Ctrl+Shift+X)中直接搜索这些插件的名字安装即可 1.HTML Snippets 超级使用且初级的H5代码片段以及提示 2.HTML CSS Support 让HTML标签上写cla ...