效果图如下：

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. openssl命令使用

    openssl openssl是个密码工具集,提供多端接口调用方式 组成: 1. 代码库 libcryto ,libssl(ssl/tls) 2. 工具集 openssl 对称加密 对称加密主要是用a ...

  2. Django的路由层(URLconf)

    URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于客户端发来的某个URL调用哪一段逻辑代码 ...

  3. Java入门到精通——调错篇之Eclipse Java compiler level dose not match the version of the installed Java project

    一.错误现象. java项目显示红色,并且类中引用包中会报红色错误,在Eclipse下面显示下面错误提示如图: 二.错误原因. 通过字面意思一看就很明白java的版本不对. 三.解决办法. 3.1右键 ...

  4. Highcharts - Bar Chart & Column Chart

    1. 条形图(Bar Chart)需要的数据格式类型如下: ["Luke Skywalker", "Darth Vader", "Yoda" ...

  5. AngularJS Toaster的简单介绍

    github地址: https://github.com/jirikavi/AngularJS-Toaster 参考博客: https://www.cnblogs.com/youzhuxiaoyao/ ...

  6. Python对数组的基本操作

    # coding=utf-8创建并打印数组'''arr = ["aex", "bfe", "mpilgrim", "zddd&qu ...

  7. Oracle自定义行转列函数

    --行转列自定义函数,只针对TABLE1表 --paramType是参数类型,用于判断,param1和param2是条件参数 create or replace function My_concat( ...

  8. django搭建简单开发项目流程(一)

    1 搭建环境 sudo apt-get install python3-pip 安装pip3 sudo pip3 install virtualenv 安装虚拟环境 virtualenv -p pyt ...

  9. May 10th 2017 Week 19th Wednesday

    Imagination is the source of creation. 想象是创作之源. Sometimes, creation and innovation are very simple, ...

  10. 我是一只IT小小鸟读后感 Part 1

    我是一只IT小小鸟读后感 Part 1 梦断计院 作为一个工科生,真的和作者想到一块去了.在科大这个环境下,GPA成了衡量一个学生优秀与否的唯一因素,而真正对于编程和技术性的东西有兴趣的,往往被埋没在 ...