表单

表单在网页中十分常见, 像我们的注册页面, 用户登录页面,天天使用的搜索栏.它们都是一些常见的表单.表单的作用就是上传用户的数据,服务通过表单接受的数据,并为用户提供相应的服务.

表单标签

form标签:一般情况下表单项要放在 FORM 内提交.
form属性:

属性	说明
action	后台地址
method	提交方式 GET 或 POST

2.label 用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的.

3.input文本框用于输入单行文本使用，下面是常用属性与示例:

属性	说明
type	表单类型默认为 text
name	后台接收字段名
required	必须输入
placeholder	提示文本内容
value	默认值
maxlength	允许最大输入字符数
size	表单显示长度，一般用不使用而用 css 控制
disabled	禁止使用，不可以提交到后台
readonly	只读，可提交到后台

通过设置表单的type字段可以指定不同的输入内容。

类型	说明
email	输入内容为邮箱
url	输入内容为URL地址
password	输入内容为密码项
tel	电话号移动端会调出数字键盘
search	搜索框
hidden	隐藏表单
submit	提交表单

4.select下拉列表项可用于多个值中的选择.

选项	说明
multiple	支持多选
size	列表框高度
optgroup	选项组
selected	选中状态
option	选项值

5.radio单选框指只能选择一个选项的表单，如性别的选择男、女、保密只能选择一个

选项	说明
checked	选中状态

6.checkbox复选框指允许选择多个值的表单。

7.datalist input表单的输入值选项列表.

<form action="" method="post">
  <input type="text" list="lesson">
  <datalist id="lesson">
    <option value="PHP">后台管理语言</option>
    <option value="CSS">美化网站页面</option>
    <option value="MYSQL">掌握数据库使用</option>
  </datalist>
</form>

表单联系

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" contetn="Test Login">
        <meta name="description" content="User Login">
        <title>Login</title>
        <style>
            h3 {
                color: red;
                text-align: center;
            }
            div{
                margin:10px auto;
            }
            div button {
                background-color: blue; 
                color: red;           
            }
            /*兄弟选择器*/
            label+input {
               border-radius: 10px;
               border: solid 2px ; 
            }
            /*父子选择器*/
            div>label {
                font-size: 20px            
            }
            input[id="user"],input[id="passwd"] {
                width: 300px; 
                margin: 0 auto;           
            }
            #label-game {
                color: yellow;            
            }
        </style>
    </head>
    <body>
        <h3>用户注册</h3>
        <div>
            <form action="#" method="POST">
               <fieldset>
                    <legend>必填信息</legend>
                    <div>
                        <label for="user">账号: </label> <input type="text" placeholder="填入账号" required id="user" name="ID" />
                    </div>
                    <div>
                        <label for="passwd">密码: </label> <input type="password" placeholder="填入密码" required id="passwd" name="PWS" />
                    </div>
                    <div>
                        <label for="female">性别</label>
                        <label for="male">男:</label> <input type="radio"  id="male" value="meal" name="gender" />
                        <label for="female">女:</label> <input type="radio" id="female" value="female" name="gender"/>
                    </div>
                    <div>
                        <label for="hobby[]">爱好:<label>
                        <label for="football">足球</label> <input type="checkbox" id="football" value="football"/>
                        <label for="game" id="label-game">游戏</label> <input type="checkbox" id="game" value="game"></input>
                    </div>
                    <div>
                        <label for>会员选择:</label> <input type="text" required list="vip"/>
                        <datalist id="vip">
                            <option value="vip1">白金会员</option>
                            <option value="vip2">砖石会员</option>
                            <option value="vip3">镀金会员</option>
                        </datalist>
                    </div>
                    <div>
                        <label>课程选择:</label>
                         <select name="lesson">
                            <option value="">===课程===</option>
                            <optgroup label="后端课程">
                                <option value="PHP">PHP</option>
                                <option value="JAVA">JAVA</option>
                                <option value="Node.js">Node.js</option>
                            </optgroup>
                            <optgroup label="前端课程">
                                <option value="HTML">HTML</option>
                                <option value="CSS">CSS</option>
                                <option value="JavaScript">JavaScript</option>
                            </optgroup>
                         </select>
                    </div>
                    <div>
                        <label for="signature">个性签名:</label>
                        <textarea id="signature" name="content" cols="40" rows="1"></textarea>
                    </div>
                    <div>
                        <button type="submit">提交</button>
                    </div>
               </fieldset> 
            </form>
        </div>
    </body>
</html>

效果图

常用选择器

选择器	示例	描述
.class	.intro	选择 class=”intro” 的所有元素
#id	#firstname	选择 id=”firstname” 的所有元素
*	*	选择所有元素
element	p	选择所有元素
elementA,elementB	div,p	选择所有elementA和所有element
elementA elementB	div p	选择elementA内部的所有elementB
elementA>elementB	div>p	选择父元素:elementA的所有子元素elementB
elementA+elementB	div+p	选择紧接在elementA之后的elementB元素

实战

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Test</title>
        <style>
            /*元素选择器*/
            h3 {
                color: red;            
            }
            /*id选择器*/
            #span_1 {
                background-color: blue;
            }
            /*class选择器*/
            .span_2 {
                color: yellow;            
            }
            /*父子选择器*/
            ul>li {
                font-size: 2em;            
            }
            /*后代选择器*/
            ul li a {
                color: red;            
            }
            /*兄弟元素选择器*/
            ul+p {
                color: pink;            
            }
            /*紧邻元素选择器*/
            ul.ul_1~p{
                color: yellow;            
            }
        </style>
    </head>
    <body>
        <h3>Hello</h3>
        <span id="span_1">Helloword</span> <br />
        <span class="span_2">Helloword</span>
        <ul>
            <li><a href="https://www.baidu.com" target="_black">https://www.baidu.com</a></li>
            <li><span>HaHaHa</span></li>
        </ul>
        <p>YES1</p>
        <p>YES2</p>
        <ul class="ul_1">
            <li><a href="https://www.baidu.com" target="_black">https://www.baidu.com</a></li>
            <li><span>HaHaHa</span></li>
        </ul>
        <p>YES11</p>
        <p>YES22</p>
        <p>YES33</p>
        <h1 class="h1_1">Hello world</h1>
        <h1 id="h1_2">Hello world</h1>
    </body>
</html>

实战:简单的注册页面与常用选择器

表单

表单标签

表单联系

效果图

常用选择器

实战

相关文章