html5标签（完结）

1.表单

 目的：用户输入，与服务器进行交互

 （1）组成部分

   1）form表单标签
    规定表单的数据收集范围

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

   2)属性
   action数据提交的服务器地址
   method的值可以是get（查询服务器的数据），post（修改服务器的数据）

 （2）表单域（input）

   1）用户可以进行交互的控件
   2）类型（type）：text文本；password密码；submit提交服务器按钮类型；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">
            学&emsp;历：<select name="" id="">
                <option>小学</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>
            学&emsp;历：<select name="" id="">
                            <option>小学</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