表格与表单常用属性

Table标签属性

<table border="1px" align="center" cellspacing="0px" cellpadding="10px"><table/>

border属性：用来设置表格的边框线，默认为0。；

border属性默认为solid实线，可通过为table设置class类选择器标签来通过border-style属性设置为dashed修改为虚线；

 

<table border="1px" class="xu"><table/>
 .xu{
            border-style: dashed;
        }

align属性: 设置表格在页面中的对齐方式，值一般为left，right，center；

cellspacing属性: 设置表格线的距离，即table边框线与table内tr，td边框线的距离；

cellpadding属性: 设置的为表格内的文本距离边框之间的距离；

form表单属性

<!-- 表单 -->
    <form action="" name="" method="">
        <!-- id唯一标识 方便找到
        name起名字 可以重复
        text文本类型
        value默认值 -->
        用户名:<input placeholder="请输入用户名" id="username" name="wd" maxlength="10" type="text" value="ch" />
        <br>
        密码: <input type="password" name="password" value="123456" maxlength="6" />
        <br>
        性别:
        <label for="man">男</label>
        <input type="radio" name="sex" id="man" value="1" />
        <label for="girl">女</label>
        <input type="radio" name="sex" id="girl" value="0" />
        <label>你猜
            <input type="radio" name="sex" id="" value="2" />
        </label>
        <br>
        爱好:
        <input type="checkbox" name="hobby" value="c">唱
        <input type="checkbox" name="hobby" value="t">跳
        <input type="checkbox" name="hobby" value="r">rap
        <input type="checkbox" name="hobby" value="l">篮球
        <br>
        位置:
        <select>
            <option value="hn" disabled="disabled">河南</option>
            <option value="hb">河北</option>
            <option value="sd">山东</option>
            <option value="sx">山西</option>
        </select>
        <br>
        自我介绍:
        <textarea rows="" cols="" value=""></textarea>
        <br>
        禁止使用:
        <input type="" name="" id="" value="" disabled />
        <br>
        隐藏的input:
        <input type="hidden" name="yincang" value="123456789" />
        文件:
        <input type="file" name="" id="" value="" />
        <br>
        <input type="submit" name="" id="" value="提交" />
        <input type="reset" name="" id="" value="重置" />
    </form>

action属性：用来指定跳转传递数据的url地址，可以为网络地址或本地地址；

method属性: 用来指定跳转的方式，一般常用的有get请求和post请求，get请求为地址拼接跳转，将请求拼接在url地址的后面，并且两者使用"?"连接，变量之间使用"&"连接，一般从服务器获取数据默认用get；post请求时通过会话传送到服务器，实际就是提交数据；

label标签

label标签通常配合表单中input进行使用，它可以关联特定的表单控件；

分为显式关联和隐式关联

显式关联：

        <label for="man">男</label>
        <input type="radio" name="sex" id="man" value="1" />
        <label for="girl">女</label>
        <input type="radio" name="sex" id="girl" value="0" />

通过for属性绑定单选表单控件的id，这样当用户点击文字时同样可以对单选进行操做。

隐式关联：

        <label>你猜
            <input type="radio" name="sex" id="" value="2" />
        </label>

通过label标签的开始与闭合将要使用的控件包裹在里面实现点击文字就能选中的操做。

一般label在表单中配合单选或者多选的情况较多。

form表单高级

<form action="" method="post">
            <fieldset>
                <!-- dieldset属性是对表单进行分组，legend属性为表单分组的名称 --!>
                <legend>高级标签测试</legend>
                
                <!-- 会自动校验是否是正确的域名格式 -->
                域名:
                <input type="url" name="" id="" value="https://www.baidu.com" />
                <br>
                <!-- 会自动校验是否是邮箱格式 
                 autofocus 自动获取焦点
                 required 不允许为空
                
                -->
                邮箱
                <input type="email" name="" id="" value="" autofocus required />
                
                <br>
                <input type="color" name="" id="" value="" />
                <input type="date" name="" id="" value="" />
                <input type="datetime" name="" id="" value="" />
                <input type="month" name="" id="" value="" />
                <input type="number" name="" id="" value="" />
                <input type="tel" name="" id="" value="" />
                
                <input type="submit" value="提交"/>
                
                
            </fieldset>
        
        </form>