效果图如下：

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. 纯CSS的三角符号

    项目中经常用到三角形,现在给大家讲下用纯CSS写的下三角实心图形 .triangle{ border-width: 5px 4px 0 4px; border-color: #454A7B trans ...

  2. es6新增的数组方法和对象

    es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map let arr=[1,2,3,4,3,2,1,2]; 遍历数组最简洁直接的方法法 for (let value ...

  3. CSS3图片边框

    CSS3图片边框 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似,语法规则:

  4. Azure进阶攻略丨共享访问签名是个什么东东？

    Azure 进阶攻略]一经推出便受到了广大粉丝的热情追捧,大家纷纷表示涨了姿势,并希望能了解更多的攻略~根据大家的投票结果,本期,小编将为大家讲解“如何生成 Shared Access Signatu ...

  5. aiohttp模块1 client

    Make a Request import aiohttp async with aiohttp.ClientSession() as session: async with session.get( ...

  6. ThinkPHP5专题

    TinkPHP5中 1. model中select()后的查询结果是对象而不是数组 2. model中 假如有 $result=$this->field($fields)->where($ ...

  7. Win10提示“您未连接到nvidia gpu的显示器”的解决方法

    显卡有Nvidia 和 ATI两个芯片,我们经常称他们为N卡和A卡,N卡更加注重于性能,而A卡则为颜色艳丽,画面更好.不过,最近一些windows10系统用户在使用N卡过程中,遇到了提示“您当前未使用 ...

  8. 描边时消除锯齿SetSmoothingMode

    SmoothingModeAntiAlias 指定消除锯齿的呈现. SmoothingModeDefault 指定默认模式. SmoothingModeHighQuality 指定高质量.低速度呈现. ...

  9. 大小端,"字节序"

    2 字节序 2.1 字节 字节(Byte)作为计算机世界的计量单位,和大家手中的人民币多少多少“元”一个意思.反正,到了计算机的世界,说字节就对了,使用人家的基本计量单位,这是入乡随俗. 比如,一个电 ...

  10. python:包与异常处理

    一.包 1,什么是包? 把解决一类问题的模块放在同一个文件夹里-----包 2,包是一种通过使用‘.模块名’来组织python模块名称空间的方式. 1. 无论是import形式还是from...imp ...