效果图如下：

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. springmvc 登陆拦截器 配合shiro框架使用

    public class LoginHandlerInterceptor extends HandlerInterceptorAdapter{ @Override public boolean pre ...

  2. caffe-windows之手写体数字识别例程mnist

    caffe-windows之手写体数字识别例程mnist 一.训练测试网络模型 1.准备数据 Caffe不是直接处理原始数据的,而是由预处理程序将原始数据变换存储为LMDB格式,这种方式可以保持较高的 ...

  3. CSS如何设置换行文字自动对齐

    CSS如何设置换行文字自动对齐 如图所示: 代码实现如下: <ul class='warn-page-content'>                <li>         ...

  4. jar命令使用介绍

    http://docs.oracle.com/javase/7/docs/technotes/tools/solaris/jar.html Skip to Content Oracle Technol ...

  5. Android自定义验证码输入框

    未经允许,禁止

  6. CSS3嵌入字体

    @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体.语法: 例子:

  7. SQL还原数据库后孤立用户问题处理（SQL 数据库 拥有对象 无法删除）

    所谓孤立帐户,就是某个数据库的帐户只有用户名而没有登录名,这样的用户在用户库的sysusers系统表中存在,而在master数据库的syslogins中却没有对应的记录 孤立帐户的产生一般是一下两种: ...

  8. 多线程（八）~ThreadLocal、InheritableThreadLocal的使用

    通过前面的学习,我们了解了在多线程+成员变量等情况下会出现线程安全的问题.那么解决线程安全问题除了使用synchronize关键字之外,还有另一种常用的解决思路,那就是使用ThreadLocal类,下 ...

  9. 一键完成SAP部署的秘密，想知道么？

    诸如 SAP 这样的企业级应用已成为普遍的流行趋势.考虑到不同行业和需求的特点,所选平台必须能够为不同层面用户和各种 IT 活动提供灵活的容量需求. 此时上云也许是种不错的选择,而想上云的企业,一方面 ...

  10. 【SQL Server 2012】按倒序存储“分组统计”结果的临时表到新建表

    程序预先说明: 本文访问的数据库是基于存有RDF三元组的开源数据库Localyago修改的库,其中只有一个表,表中有五个属性:主语subject.谓语predict.宾语object.主语的编号sub ...