1.表单标签

2.input标签属性与取值

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--

            表单标签form

                input

                    取值：text---文本框

                        password---密码框

                        radio---单选框

                        checkbox---复选框（又称多选框）

                        submit---提交按钮

                        reset---重置按钮

                        button---自定义按钮

                        image---图片按钮

                        file---上传文件按钮

                        hidden---隐藏

        -->

        <form action="http://www.apeclass.com/">

            <p>

                <input type="text" name="userName" value="用户名" />

            </p>

            <p><input type="password" name="passWord" /></p>

            <p>

                <input type="radio" name="sex" value="men" />男

                <input type="radio" name="sex" value="women" />女

            </p>

            <p>

                <input type="checkbox" name="interest" value="eat"  />吃饭

                <input type="checkbox" name="interest" value="sleep"  />睡觉

                <input type="checkbox" name="interest" value="play"  />打豆豆

            </p>

            <p>

                <input type="submit" value="提交按钮" />

                <input type="reset" value="重置按钮" />

            </p>

            <p>

                <input type="button" value="自定义按钮" />

                <input type="image" src="img/img_01.gif" />

            </p>

            <p>

                <input type="file" name="img" />

            </p>

            <p>

                <input type="hidden" />

            </p>

        </form>

    </body>

</html>

效果图

3.label标签

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--

            label用来辅助input，点击label后能够让对应的input变成可输入的状态

            for属性里放的是对应input的id

        -->

        <p>

            <label for="userName">用户名：</label>

            <input type="text" id="userName" />

        </p>

        <p>

            <label for="pw" >密码：</label>

            <input type="password" id="pw" />

        </p>

        <p>

            <label for="number">手机号：</label>

            <input type="text" id="number" />

        </p>

    </body>

</html>

4.checked默认选中

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--

            checked     让表单一上来有一个默认选中的状态

        -->

        <p>

            <input type="radio" name="sex" value="men" />男

            <input type="radio" name="sex" value="women" checked="checked" />女

        </p>

        <p>

            <input type="checkbox" name="interest" value="eat"  />吃饭

            <input type="checkbox" name="interest" value="sleep"  />睡觉

            <input type="checkbox" name="interest" value="play" checked="checked"  />打豆豆

        </p>

    </body>

</html>

5.disabled和readonly

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--

            disabled            禁止用户输入，并且这个表单不会被提交

            readonly            让表单变成只读状态，这个表单会被提交

        -->

        <form action="http://www.apeclass.com/">

            <p>

                <label for="userName">用户名：</label>

                <input type="text" name="userName" value="kaivon" disabled="disabled" />

            </p>

            <p>

                <label for="pw" >密码：</label>

                <input type="password" name="pw" value="123" readonly="readonly" />

            </p>

            <p>

                <label for="number">手机号：</label>

                <input type="text" name="number" />

            </p>

            <input type="submit" />

        </form>

    </body>

</html>

效果图

6.下拉框和文本域

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            form{

                margin: 0;  /*IE6下会有一个margin*/

            }

            input{

                margin: 0;

                padding: 0;

                outline: none;

            }

            textarea{

                margin: 0;

                padding: 0;

                resize: none;

                overflow: auto;

                /*清除轮廓边框，

                 * 不清除时，鼠标点击文本域时，会看到一个略微放大的效果

                 *

                 * 你也可以设置一个outline看一下效果，如下

                 * /*outline: 5px solid red;*/

                 * */

                outline: none;

                border: 1px solid blue;

            }

        </style>

    </head>

    <body>

        <form action="http://www.baidu.com/">

            <select name="area">

                <option>北京</option>

                <option selected="selected">上海</option>

                <option>广州</option>

            </select>

            <input type="submit" />

            <!--style="width: 300px; height: 300px;"-->

            <textarea name="text" id="" rows="5" cols="100"></textarea>

        </form>

    </body>

</html>

一天搞定CSS：表单（form）--20的更多相关文章

  1. 我和小美的撸码日记(3)之一句话搞定MVC表单页数据绑定与提交

    “尼玛哥,你今天有空么?” “今天周日呀,怎么会没空,你这是要约么?麻辣烫凉皮我都吃,在哪儿,我一会儿就到.” “约你妹呀,我昨天都加一天班了,东西到现在还没搞完,你给我快点过来呀,我需要你!” “别 ...

  2. 我和小美的撸码日记(3)之中的一个句话搞定MVC表单页数据绑定与提交

    另外献上在<线体验Demo地址>希望大家也能从中得到一些启示. 地址:http://121.40.148.178:8080/ . username:guest,password:12345 ...

  3. amazeui学习笔记--css（HTML元素3）--表单Form

    amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...

  4. HTML ------ 关于表单 Form

    Form(表单)主要用于采集和提交用户输入的信息,是页面与WEB服务器交互过程中 最重要的信息来源. 掌握表单(Form)有以下几个要点: 重要form属性 form常用控件 form提交方式 § 重 ...

  5. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  6. sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...

  7. HTML（七）HTML 表单(form元素介绍，input元素的常用type类型，input元素的常用属性)

    前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...

  8. HTML中的表单<form>标签

    一.HTML表单 HTML 表单用于搜集不同类型的用户输入. HTML 表单包含表单元素,表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等. 关于表单的更多内容可以参考htt ...

  9. [入门到吐槽系列] Webix 10分钟入门 二 表单Form的使用

    前言 继续接着上一篇的webix入门:https://www.cnblogs.com/zc22/p/15912342.html.今天完成剩下两个最重要的控件,表单和表格的使用.掌握了这两个,整个Web ...

  10. Bootstrap~表单Form

    回到目录 在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布 ...

随机推荐

  1. 关于使用ModelSim中编写testbench模板问题

    对于初学者来说写Testbench测试文件还是比较困难的,但Modelsim和quartus ii都提供了模板,下面就如何使用Modelsim提供的模板进行操作. Modelsim提供了很多Testb ...

  2. JS事件处理程序

    JS事件处理程序:HTML事件处理程序.DOM0级事件处理程序.DOM2级事件处理程序.IE事件处理程序.跨浏览器的事件处理程序. HTML事件处理程序 <script type="t ...

  3. Entity Framework查询注意

    首先我们看下where的方法,直接查看定义(定义如下),其实一种是对IEnumerable的扩展,一种是对IQueryable的扩展,直接看最常用的,其实区别就在IEnumerable的扩展的参数是系 ...

  4. 《JavaScript面向对象编程指南（第2版）》读书笔记（一）

    目录 一.对象 1.1 获取属性值的方式 1.2 获取动态生成的属性的值 二.数组 2.1 检测是否为数组 2.2 增加数组长度导致未赋值的位置为undefined 2.3 用闭包实现简易迭代器 三. ...

  5. 商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)

    前言 本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 现在很多的 APP 里面都有自己的自定义风格,特别是京东商城中自 ...

  6. linux操作系统中对大小端的判断

    static union { char c[4]; unsigned long l; } endian_test = { { 'l', '?', '?', 'b' } }; #define ENDIA ...

  7. OSI七层模型学习笔记

    1.简介 什么是OSI模型呢? OSI模型全名Open System InterConnect 即开放式系统互联,是国际标准化组织(ISO)提出的一个试图使各种计算机在世界范围内互连为网络的标准框架, ...

  8. hive集成sentry

    1.安装配置sentry 详细步骤见上一篇安装配置sentry 2.配置hive 2.1 Hive-server2集成Sentry 在 /etc/hive/conf/hive-site.xml中添加: ...

  9. 算法问题：最长滑道问题（非递归，C++）

    题目描述请参考博客http://blog.csdn.net/sinat_30186009/article/details/52356053,在此表示感谢. 基本思路参考了以上文章,但是上面文章中的算法 ...

  10. 【css笔记(2)】如何给元素应用规则?

    css选择器 在介绍之前我么你先来看看css大致分为几种选择器: 1.类型选择器(元素选择器) 2.后代选择器(元素的所有后代) 3.伪类(:active, :hover, :focus, :link ...