效果图：

html代码：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>表格</title>

        <link rel="stylesheet" type="text/css" href="css/form.css" />

    </head>

    <body>

        Hello Web!`    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        form 是<b>块元素</b>，独占一行。

        <div >

            <form action="deal.html" id="userregist" >

                <!-- 表单项分组fieldset -->

                <!-- legend子标签，设置组名，并显示在页面上。 -->

                <!-- 服务器要求使用。 -->

                <fieldset>

                    <legend>用户账号密码</legend>

                    <!-- 标签框 label    拥有一个for属性，指定一个表单项的id -->

                    <label for="regname">用&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;名&nbsp;：</label>

                    <!-- 文本框 text -->

                    <input type="text" id="regname" name="username" value="" /><br />

                    <br />

                    <!-- 密码框 password -->

                    请设置密码：

                    <input type="password" name="userpassword1" value=""/><br />

                    <br />

                    再输入密码：

                    <input type="password" name="userpassword2" value=""/><br />

                </fieldset>

                <br />

                <!-- 单选按钮 radio    name相同的按钮是为一组，    最好设置value -->

                <!-- 设置默认选项：checked="checked" -->

                性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：

                <input type="radio" name="usersex" value="boy" />男

                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                <input type="radio" name="usersex" value="girl" checked="checked"/>女<br />

                <br />

                <!-- 多选按钮 checkbox -->

                <!-- 设置默认选项：checked="checked" -->

                水&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;果：

                <input type="checkbox" name="userfood" value="boy" />苹果

                <input type="checkbox" name="userfood" value="pear" checked="checked" />梨

                <input type="checkbox" name="userfood" value="girl" checked="checked" />香蕉<br />

                <br />

                <!-- 下拉列表 select    使用 option 设置选项    name指定给select    value 指定给 option -->

                <!-- 设置默认选项：selected="selected" -->

                住&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：

                <select name="userhome">

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

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

                    <option value="cs">长沙</option>

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

                    <option value="zjj" selected="selected">张家界</option>

                </select><br />

                <br />

                <!-- 多选下拉列表：multiple="multiple" -->

                爱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好：

                <select name="userhobby" multiple="multiple">

                    <option value="draw" selected="selected">画画</option>

                    <option value="swim">游泳</option>

                    <option value="run">跑步</option>

                    <option value="sleep" selected="selected">睡觉</option>

                </select><br />

                <br />

                <!-- 多选下拉列表选项分组 -->

                偶&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像：

                <select name="userstar" multiple="multiple">

                    <optgroup>

                        <option value="JM" selected="selected">约瑟夫 摩根</option>

                        <option value="CL">成龙</option>

                        <option value="WJ">吴京</option>

                    </optgroup>

                    <optgroup>

                        <option value="ZLY" >赵丽颖</option>

                        <option value="LYF" selected="selected">刘亦菲</option>

                    </optgroup>

                </select><br />

                <br />

                <!-- 文本域 textarea -->

                自我简介：

                <textarea name="userword">

                </textarea><br />

                <input type="reset" value="重新填写" id="resetuser" />

                <input type="submit" value="马上注册" id="submituser" />

                <!-- 创建一个单纯的按钮，没有任何功能，只能被点击。 -->

                <!-- 结合JS实现无限功能。 -->

                <input type="button" value="已有账号，现在登录"/><br />

                <!-- 以下按钮更加灵活，成对出现，可以在中间设置<img > -->

                <button type="reset">重新填写</button>

                <button type="submit">马上注册</button>

                <button type="button">已有账号，现在登录</button><br />

            </form>

        </div>

    </body>

</html>

css代码：

@charset "utf-8";

*{

    margin: 0px;

    padding: 0px;

}

.clearfix {

    zoom:;

}

.clearfix:before,

.clearfix:after {

    content:"";

    display: table;

    clear: both;

}

body{

    background-color: #3e4e54;

}

#userregist{

    width: 500px;

    margin: 0px auto;

}

__x__(45)0910第六天__各种表单的更多相关文章

  1. __x__(44)0910第六天__表单

    form表单: form必须属性:action,指定一个服务器地址. 若希望表单中的数据发送给服务器,必须设置name属性. 用户填写的信息,将会追加在url地址?后面,以查询字符串的形式发送给服务器 ...

  2. __x__(46)0910第六天__框架集

     框架集frameset 和 内联框架iframe 的作用类似: 在一个页面中,引入其他的外部html页面. 框架集可以同时引入多个页面. 在 html5 中,推荐使用框架集,而不推荐使用iframe ...

  3. __x__(49)0910第六天__命名规范

    id class 命名规范: 小驼峰命名法: aaaBbbCcc,helloWorld 大驼峰命名法: AaaBbbCcc,HelloWorld 匈牙利命名法: 类型+描述 formUserName, ...

  4. __x__(42)0910第六天__表格布局 老旧的布局方法

    table 布局 不易于维护,耦合太严重了. 不利于搜索引擎检索. 效果图: html代码: <!doctype html> <html> <head> <m ...

  5. __x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷

    <div class="box1"> <tabl></table> <div class="box2">< ...

  6. __x__(47)0910第六天__IE6到IE11对于包含中文路径的png显示问题

    问题:IE6额外地除了中文路径外,对于png24的支持度不高,以致于无法透明. 解决方法1,png8 替换: png8 比 png24 小,质量较低,但是在这里可以替代,以解决问题. 使用 ps 打开 ...

  7. __x__(48)0910第六天__CSS Hack

    CSS Hack: 不到万不得已,不要使用.不易于维护. 有一些情况,需要一段特殊代码在遇到特殊浏览器环境才执行,而在其他条件下,不执行. 此时,CSS Hack 就能实现. CSS Hack 实际上 ...

  8. HTML表单__表单元素属性

    看完"HTML表单__表单元素"那一节的同学会发现,同是input标签,type属性值不一样的时候,input类型完全不一样.type就是input的一个属性,除type之外,还有 ...

  9. FineUI第六天---表单控件

    表单控件 所有表单控件都有的属性有: ShowLabel:是否显示标签(默认值:true). ShowEmptyLabel:是否显示空白的标签(默认值:false). Label:标签文本(默认值:& ...

随机推荐

  1. C++回顾day03---<输入输出流>

    一:C++输入输出包含下面3个方面 (一)标准I/O 对系统指定的标准设备的输入和输出.即从键盘输入数据,输出到显示器屏幕.这种输入输出称为标准的输入输出. (二)文件I/O 以外存磁盘文件为对象进行 ...

  2. HDU 6108(整除判断 数学)

    题意是求在给定的 P 进制下,满足条件的数字 B 有多少.条件:若任何一个数的各位数字之和能被 B 整除,则该数可被 B 整除. 在 p 进制下,每个正整数都可以都可以表示为:a0*p^0 + a1* ...

  3. 第十六节：语法总结(3)(C#6.0和C#7.0新语法)

    一. C# 6.0 新语法 1. 自动属性初始化可以赋值 /// <summary> /// 自动属性初始化 /// </summary> public class UserI ...

  4. [Luogu P4180][BJWC 2010]严格次小生成树

    严格次小生成树,关键是“严格”,如果是不严格的其实只需要枚举每条不在最小生成树的边,如果得到边权和大于等于最小生成树的结束就行.原理就是因为Kruskal非常贪心,只要随便改一条边就能得到一个非严格的 ...

  5. 关于中国菜刀，如何"切菜"

    介绍 经典标题党,中国菜刀有大牛已经分析过了->传送门(http://blog.csdn.net/p656456564545/article/details/49671829).博主PHP刚接触 ...

  6. 利用div绘制细线居中

    利用div配合css代码实现细线方式: 块级元素水平居中步骤: 设置宽度width 设置margin-left:auto; 设置margin-right:auto; 实现方法是,让其左右两边的外边距自 ...

  7. HttpReponse

    属性: django将请求报文中的请求行.头部信息.内容主体封装成 HttpRequest 类中的属性.   除了特殊说明的之外,其他均为只读的. 0.HttpRequest.scheme   表示请 ...

  8. rocketmq 4.2.0集群配置

    采用的是2m-2s-async模式 1.  修改每台机器的/etc/hosts  文件,增加如下内容 192.168.1.100 nameserver1192.168.1.102 nameserver ...

  9. 简单使用Markdown

    Markdown是一种纯文本格式的标记语言.通过简单的标记语法,它可以使普通文本内容具有一定的格式. 相比WYSIWYG编辑器 优点: 1.因为是纯文本,所以只要支持Markdown的地方都能获得一样 ...

  10. 【原创】大叔经验分享（19）spark on yarn提交任务之后执行进度总是10%

    spark 2.1.1 系统中希望监控spark on yarn任务的执行进度,但是监控过程发现提交任务之后执行进度总是10%,直到执行成功或者失败,进度会突然变为100%,很神奇, 下面看spark ...