效果图如下：

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. topshelf windows服务

    一 开发: 1.新建控制台程序 2.nuget下载topshelf,根据不同的net版本选择下载版本,本人4.5下载3.3.1 3.main方法中增加 HostFactory.Run(x => ...

  2. Error creating bean with name 'com.cloud.feign.interfaces.xxxFeignClient': FactoryBean threw exception on object creation; nested exception is java.lang.IllegalSt.PathVariable annotation was empty on

    环境: Spring Cloud:Finchley.M8 Spring Boot:2.0.0.RELEASE 报错信息: Error creating bean with name 'com.clou ...

  3. 转：HTML中让图片滚动的<marquee>标签的使用方法

    实例: <marquee id="affiche" align="left" behavior="scroll" bgcolor=&q ...

  4. 解决C#调试ArcMap断点不能停的问题

    问题出在ArcMap bin\ArcMap.exe.config 默认是不支持NET4.0 <startup> <!--<supportedRuntime version=&q ...

  5. WebSettings 最全属性说明

    setAllowContentAccess (boolean allow) 是否允许在WebView中访问内容URL(Content Url),默认允许.内容Url访问允许WebView从安装在系统中 ...

  6. oracle_procedure

    define: 存储过程(Stored Procedure )是一组为了完成特定功能的SQL 语句 集,经编译后存储在数据库中.用户通过指定存储过程的名字并给出参数(如果该存储过程带有参数)来执行它. ...

  7. 3.Zabbix 3.0 部署

    请查看我的有道云笔记: http://note.youdao.com/noteshare?id=0139b8d2833129740be82e36a94e4fca&sub=5931260FCC8 ...

  8. 查看oracle固定目录下日志和trace文件大小脚本

    python刚入门,在Oracle官网看到个小脚本,感觉挺有意思,经过测试切实可行. [oracle@ycr python]$ more 5.py import datetimeimport osim ...

  9. Android面试问题收集总结

    转载请标明出处: http://www.cnblogs.com/why168888/p/6405204.html 本文出自:[Edwin博客园] Android基础 View的绘制流程:自定义View ...

  10. OC extern和函数

    #include <stdio.h> // 定义一个one函数 // 完整地定义一个外部函数需要extern关键字 //extern void one() { // printf(&quo ...