效果图如下：

HTML代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>06-表单1</title>

    <style>

        form{

            width: 500px;

            height: 800px;

            border:1px solid red;

            /* 标签居中 */

            margin:0  auto;

        }

        input{

            /* 去掉高亮 蓝色的逛框 */

            /* outline: none; */

        }

    </style>

    <!-- html中能够提交数据的标签  只有 表单 form -->

</head>

<body>

    <!-- form

    action: 提交网址;默认就是当前的网址

    method: 提交方式: get 默认 不安全

                    post 登录注册 一定是post

    -->

    <form action="" method="">

        <p>

            <!-- 1.用户名 -->

            <label for="abc">用户名:</label>

            <input id="abc" type="text" name="user" placeholder="请输入用户名">

        </p>

        <p>

             <!-- 2.密码 -->

            <label for="">密   码:</label>

            <input  type="password" name="pwd">

        </p>

        <p>

            <!-- 3.性别 -->

            <label for="">性   别:</label>

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

            <input type="radio" name="sex" value="woman">女

        </p>

        <p>

                <!-- 4.爱好 -->

               <label for="">爱   好:</label>

              <input type="checkbox"  name="like" value="0">睡觉

              <input type="checkbox" name="like" value="1">学习写代码

              <input type="checkbox" name="like" value="2">跑步

              <input type="checkbox" name="like" value="3">看妹子

              <input type="checkbox" name="like" value="4">看帅哥

        </p>

        <p>

                <!-- 5.上传文件 -->

                <label for="">玉   照:</label>

                <input type="file" name="photo">

            </p>

            <p>

                    <!-- 6.下拉列表 -->

                    <label for="">籍   贯:</label>

                    <select name="address">

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

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

                        <option value="2" selected="selected">广州</option>

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

                    </select>

                </p>

    <p>

        <!-- 7.文本域

        <textarea name="" id=""></textarea>

        cols

        rows

        -->

        <label for="">个人签名:</label>

        <textarea name="info" id=""></textarea>

    </p>

    <!-- 10.隐藏域 -->

    <input type="hidden" name="isVip" value="YES">

    <!-- 8.提交数据 -->

    <input type="submit" value="注册">

     <!-- 9.清空数据 -->

     <input type="reset" >

     <input type="button" value="普通按钮"> 

    </form>

</body>

</html>

　　

CSS实现表单的更多相关文章

  1. 纯CSS实现表单验证

    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...

  2. （10）用css建立表单

    1.用css建立表单 本篇资料主要介绍使用css设置表单元素的方法. 表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册.网上登录.网上交易.网上投票 ...

  3. 学习笔记 第十章 使用CSS美化表单

    第10章   使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1  表单的基本结构 表单包含多个标签,由很多控件组成 ...

  4. css表格表单和统筹

    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

  5. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  6. 应用Css美化表单

    原来的效果  美化之后的效果  实现代码 <style> .container { margin:0auto; width:620px; } fieldset { padding:18px ...

  7. 一天搞定CSS：表单（form）--20

    1.表单标签 2.input标签属性与取值 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  8. css form表单样式清除

    开发项目中表单常用的清楚样式: 1.改变placeholder默认字体颜色 ::-webkit-input-placeholder{color: #333;} :-moz-placeholder{co ...

  9. css实现表单label文字两端对齐

    如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决 /**css代码**/ ul li{ list-style: none; } .info- ...

随机推荐

  1. 人工智能（AI）

    一.人工智能的核心——机器学习 人工智能是一个很大的圈子,但人工智能的基础是机器学习. 机器学习是什么? 其实就是人告诉机器想做什么事情,并且给它一堆数据让它模仿着去做. 机器学习需要什么? 算法.数 ...

  2. 沙箱模式的chrome浏览器的运行

    getUserMedia在chrome 47后已经不可以从非安全源访问(Insecure Origins),但测试搭建apprtc时服务器一般没有添加HTTPS安全验证,chrome就没有权限访问麦克 ...

  3. 如何获得ImageView中的图像

    我们知道在Android中ImageView是一个用于显示图像的控件,比如在很多联系人方面的应用中,需要为联系人拍摄头像,并将得到的头像放在一个 ImageView对象中显示.通常,在没有为联系人拍摄 ...

  4. webstorm 2017.1 破译

    安装完webstorm后, 在弹出的注册窗口选择 activate > license server > 在 License server address 里输入 "http:/ ...

  5. Python数组使用

    python数组的使用 2010-07-28 17:17 1.Python的数组分三种类型: (1) list 普通的链表,初始化后可以通过特定方法动态增加元素. 定义方式:arr = [元素] (2 ...

  6. SQL Server 的 主键 解决方案 NEWID() ， 自增ID

    在 SQL Server 表的主键有自增Id ,和  GUID. 1.  自增Id 优点:索引空间小,索引连续.在大量数据插入的时候性能有特别大的优势. 缺点:可移植性差,在数据迁移的时候. 2. G ...

  7. 如何将iso文件安装到VirtualBox里的ubuntu去

    我在Window的virtualbox里安装了一个ubuntu: 默认情况下IDE Secondary Master是空的. 方法1:Devices->Insert Guest Addition ...

  8. js数据封装处理

    var arr = [ { id: "1", date: "2018-07-27", time: "10:00-12:00", schedu ...

  9. python入门22 pymssql模块（python连接sql server查询）

    安装 pip install pymssql 连接数据库 pymssql.connect() # coding:utf-8 import pymssql server = '192.168.8.1' ...

  10. 利物浦VS曼城，罗指导的先手与工程师的后手

      本想『标题党』一下的,『高速反击遭遇剧情反转,巴西人力挽狂澜绝处逢生!』这种好像看起来比较厉害的标题似乎在大战之后的第五天已显得不合适了. /不害臊    反正晚了,干脆写点能够引起讨论.并且在未 ...