html5標(biāo)簽（完結(jié)）

1.表單

?目的：用戶輸入宴合，與服務(wù)器進行交互

?（1）組成部分

???1）form表單標(biāo)簽
????規(guī)定表單的數(shù)據(jù)收集范圍

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

???2)屬性
???action數(shù)據(jù)提交的服務(wù)器地址
???method的值可以是get（查詢服務(wù)器的數(shù)據(jù)）睬棚，post（修改服務(wù)器的數(shù)據(jù)）

?（2）表單域（input）

???1）用戶可以進行交互的控件
???2）類型（type）：text文本；password密碼；submit提交服務(wù)器按鈕類型略板；radio單選牧嫉；placeholder表單文本提示畏邢；name 名稱（radio成為一組的必要條件）业扒；checked="checked"選中（radio類型）

<form action="" method="post">
            用戶名：<input type="text" value="" placeholder="請輸入用戶名" /><br>
            密&emsp;碼：<input type="password" placeholder="8-16位"><br>
            性&emsp;別：<label><input type="radio" name="sex" checked="checked">男</label>
                        <label><input type="radio" name="sex">女</label>
                        <label><input type="radio" name="sex">保密</label><br>
            愛&emsp;好：<label><input type="checkbox" checked="checked">唱歌</label>
                        <label><input type="checkbox">跳舞</label>
                        <label><input type="checkbox">編程</label>
                        <label><input type="checkbox">看書</label><br>
            <input type="submit" />
            <input type="reset"  />
        </form>

??效果圖如下：

表單.png

<form action="" method="post">  
        留&emsp;言：<textarea name="" id="" cols="30" rows="10"></textarea>        
</form>

??效果圖如下：

多行.png

    <form action="" method="post">
            學(xué)&emsp;歷：<select name="" id="">
                <option>小學(xué)</option>
                <option>初中</option>
                <option>高中</option>
            </select><br>
        </form>

??效果圖如下：

下拉.png

<form action="" method="post">
            頭&emsp;像：<input type="file"><br>
        </form>

??效果圖如下：

上傳.png

        <form action="" method="post">
            <input type="reset"  />
        </form>

??7)button自定義按鈕
??以重置和提交為例：

        <form action="" method="post">
            <button type="submit">上傳信息</button>
            <button type="reset">上傳信息</button>
        </form>

??效果圖如下：

button.png

        <h1>用戶信息</h1>
        <form action="" method="post">
            用戶名：<input type="text" value="" placeholder="請輸入用戶名" /><br>
            密&emsp;碼：<input type="password" placeholder="8-16位"><br>
            性&emsp;別：<label><input type="radio" name="sex" checked="checked">男</label>
                        <label><input type="radio" name="sex">女</label>
                        <label><input type="radio" name="sex">保密</label><br>
            愛&emsp;好：<label>    <input type="checkbox" checked="checked">唱歌</label>
                        <label><input type="checkbox">跳舞</label>
                        <label><input type="checkbox">編程</label>
                        <label><input type="checkbox">看書</label><br>
            學(xué)&emsp;歷：<select name="" id="">
                            <option>小學(xué)</option>
                            <option>初中</option>
                            <option>高中</option>
                        </select><br>
            頭&emsp;像：<input type="file"><br>
            留&emsp;言：<textarea name="" id="" cols="30" rows="10"></textarea><br>
            <input type="submit" />
            <input type="reset"  />
        </form>

??效果圖如下：

完整表單.png