表格与表单

1、<table>、<thead>、<tbody>、<tfoot>、<tr>、<td>或者<th>

<table>

    <caption>学生成绩单</caption>

    <thead>

        <tr><th>姓名</th><th>性别</th><th>成绩</th></tr>

    </thead>

    <tbody>

        <tr><td>张三</td><td>男</td><td>500</td></tr>

        <tr><td>李四</td><td>男</td><td>520</td></tr>

    </tbody>

    <tfoot>

        <td>平均分</td>

        <td colspan="2" align="right">510</td>

    </tfoot>

</table>

2、排列单元格中的内容

cellpadding:规定单元边沿与其内容之间的空白

cellspacing:规定单元格之间的空白

3、表单案例——创建登录表单

        <form>
            <h2>login<span>or</span><strong>Signup</strong></h2>
            <div class="control-group">
                <div class="control">
                    <label for="username">Username:</label>
                    <input type="text" id="username" name="name" placeholder="Airen">
                </div>
                <div class="control">
                    <label for="userpassword">Password:</label>
                    <input type="password" id="userpassword" name="password" placeholder="........">
                    <div class="help-block">
                        <input type="checkbox" name="show-password" ic="show-password" />
                        <label for="show-password">Show Password</label>
                    </div>
                </div>
            </div>
            <div class="control-group">
                <button>Log in with Twitter</button>
                <button>log in</button>
            </div>
        </form>

4、表单概述

form标签

    里面有action属性，是用来处理表单的格式，可指定一个URL地址

    方法属性methoe，是get/post，选择其中一个，表明提交表单http的方法

5、表单的基本元素

    5.1 单行文本输入框 text 

    5.2 多行文本输入框 textarea 

    5.3 密码域 password 

    5.4 单选按钮 radio 

    5.5 复选框 checkbox 

    5.6 列表框 select 

    5.7 提交按钮 submit 

    5.8 重置按钮 reset 

例： <from>
        <h2>单行文本输入框</h2><!--让访问者输入内容的表单对象-->
        <input type="text" name="user" size="20" maxlength="40" value="老七">
   <!--input元素；name定义文本框的名称，保证数据的准确采集，名称定义是独一无二的；size定义文本框的宽度，这边是20个字符；maxlength="40"，字符最多能输入40个字符；value默认的姓名，如老七-->
        <h2>多行文本输入框（文本域）</h2>
        <textarea name="comment" cols="50" rows="10"></textarea>
<!--textarea标签，cols多行文本框的宽度；rows可以输入10行-->

        <h2>密码域password</h2>
        <input type="password" name="pwd" /><!--浏览器中输入显示是黑点，其他浏览器输入可能是*号--> 

        <h4>单选按钮 radio</h4>
        <input type="radio" name="book" value="book1" checked="checked"/>HTML
        <input type="radio" name="book" value="book2" />CSS
<!--checked默认的选择-->

        <h2>复选框 checkbox</h2>
        <input type="checkbox" name="book" value="book1" />HTML
        <input type="checkbox" name="book" value="book2" />CSS

        <h2>列表框 select</h2>
        <select size="" name="">
            <option value="北京" selected="selceted">北京</option>
            <option>上海</option>
            <option>广州</option>
        </select>
        <h2>列表多选框</h2><!--按住Shift按键，然后鼠标选择-->
        <select size="" name="" multiple>
            <option value="北京" selected="selceted">北京</option>
            <option>上海</option>
            <option>广州</option>
        </select>

        <h2>普通按钮</h2>
        <button>确定</button>
        <input type="button" value="确定" />
        <h2>提交按钮 submit</h2>
        <input type="submit" value="提交按钮" />
        <h2>重置按钮 reset</h2>
        <input type="reset" value="重置按钮" />
    </from>

6、表单高级元素<!--浏览器不一定都支持-->

    6.1 url属性 

    6.2 email属性 

    6.3 date和time属性 

    6.4 number属性 

    6.5 range属性 

    6.6 required属性 

例：<form action="##" method="get">
        <h2>URL</h2>
        <p>输入网址</p>
        <input type="url" name="userurl" />
        <h2>Email</h2>
        <p>输入Email地址</p>
        <input type="email" name="useremail" /> 

        <h2>Data和Time</h2>
        <p>date</p>
        <input type="date" name="user" />
        <p>month</p>
        <input type="month" name="user" />
        <p>week</p>
        <input type="week" name="user" />
        <p>time</p>
        <input type="time" name="user" />
        <p>datetime</p>
        <input type="datetime" name="user" />
        <p>datetime-local</p>
        <input type="datetime-local" name="user" />
        <h2>number</h2>
        <input type="number" name="user" min="0" max="9"/><!--输入的值最小是0，最大是9-->

        <h2>滑动条range</h2>
        <input type="range" name="user" min="0" max="100" step="10" /><!--滑动10次到头-->
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>

 

 

转载于:https://my.oschina.net/u/3633511/blog/1501463