一天搞定CSS：表单（form）--20

来源：互联网发布：mac编辑hosts文件编辑：程序博客网时间：2024/05/29 18:35

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>

0 0