HTML基础之表单

HTML基础之表单

使用form标签表示，表单中可以导入（input）很多表单元素，如文本框(单行文字)、密码框、单选框、多选框、按钮、下拉框、文本域（显示多行文字，自动换行）以及上传文件等。

代码解释：
input：表单元素标签
type：选择元素类型，根据需求设置你想要的表单，如文本框、密码框等。
placeholder:占位符也就是提示文字。

注意：
在使用单选框的时候，因为系统本身是无法知道你是要和哪几个选项放在一起供人选择的，所以要加入name属性，来标识他们为一组单选框，这样就可以实现单选功能，如果想想不到效果，也可以先不加然后跑一下看看效果。
checked：用来设置默认勾选状态，多选框也可以使用。

一般表单

	<!-- 表单 -->
    文本框：<input type="text" placeholder="提示文字">
    <br>
    <br>
    密码框：<input type="password">
    <br>
    <br>
    单选框：<input type="radio">
    <br>
    <br>
    样例：<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女
    <br>
    <br>
    多选框：<input type="checkbox">
    <br>
    <br>
    上传文件：<input type="file">
    <br>
    <br>
    上传多个文件：<input type="file" multiple>
    <br>
    <br>
    <textarea ></textarea>

按钮

表单元素可以单独使用，也可以放在表单里一起使用，根据个人习惯以及使用场景可以自行调整，然而在使用按钮元素得时候，一般需要和一些控件捆绑使用，就需要将这些个表单元素捆绑在一个表单里。
如按钮：

	<!-- 按钮 -->
    <form action="">
        <input type="text">
        <br>
        <br>
        <input type="submit">
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>

这边有三种按钮，submit是用来提交数据的按钮、reset是用来重置的按钮，如上面在文本框里输入文字后，点击重置按钮就可以清空内容（一定要把文本框和按钮放在一个表单域里form标签），最后一个是最普通也是用的最多的button普通按钮，因为他最普通，所以也是最好用来改装的（CSS+JS）。

当然按钮也有其他方式使用，他有自己单独的按钮标签。效果和使用表单一样。

	<button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>

下拉框

和选择框一样，可以设置默认选中的选项。

	<!-- 下拉菜单 -->
    <select >
        <option >香蕉</option>
        <option >橘子</option>
        <option >榴莲</option>
        <option >草莓</option>
        <option selected>樱桃</option>
    </select>

lable标签

使用场景：
如下图，为了让用户有更好的体验，在我们使用单选的时候，经常会配合文字一起使用，也就是用户无论点击文字还是小圆圈都可以选中自己想选的目标，这时候就需要将文字和单选框进行捆绑。

使用方式：
1、使用lable将文字包住，然后单选框设置id进行标记，再通过for告诉lable所包含的问文字是和哪个控件绑定的。
2、直接用lable将需要绑定的控件全部绑一起。

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