HTML学习：表单元素

HTML学习：表单元素

form标签

form标签：表单的意思，容器级标签，内部存放可输入的控件。
如果输入的表单需要提交到数据库 所有的控件需要被form表单包裹
提供的两种方法：

1. method：方法的意思，指的数据提交的方法，属性值是post和get。
2. action：数据提交的位置。
   （具体后期在学习）

input标签

input标签：输入框的一种，但是不仅仅只有输入框，通过type属性，可以拓展多功能（type属性有很多）。

输入框

最简单的：

    <form action="">
        <p>
            <!-- 设置p标签是为了可以自动换行 -->
            用户名：<input type="text">
            <!-- 默认属性是text 这时打开就是一个单行的输入框 -->
        </p>
    </form>

输入框有两个重要属性：

1. value：设置默认显示的内容，属性值为自定义内容。
2. placeholder： 属性作用是如果没有value的时候提示用户的文字占位符。

    <!-- value属性举例 -->
    <form action="">
        <p>
            用户名：<input type="text" value="刘振东">
            <!-- value绑定的是用户输入的内容 即回显用户输入的内容 和用户输入的值有直接关系 -->
        </p>
    </form>

value属性实现：

	 <!-- placeholder属性举例 -->
`    <form action="">
        <p>
            <!-- placeholder是在没有value的时候提示用户的文字占位符-->
            用户名：<input type="text" placeholder="请输入用户名">
        </p>
    </form>

placeholder属性实现：

密码框

通过type值为password设置的，显示效果是输入后通过掩码形式显示的。

    <form action="">
        <p>
            <!-- 修改为type="password" 这样使得密码隐藏-->
            密码：<input type="password" placeholder="请输入密码">
        </p>
    </form>

单选框

通过type值为radio设置的，单选按钮都是成组出现的。
如果只是单纯地设置，那除了单选还会有复选情况。

    <form action="">
        <p>
            <!-- 单选框 -->
            性别：<input type="radio">男
            <input type="radio">女
            <input type="radio">保密
        </p>
    </form>

单选框复选情况：
解决方案：
添加name属性，即有了互斥功能（相同的name属性下，只能选一个）

    <form action="">
        <p>
            <!-- 单选框 -->
            性&nbsp;别：
            <input type="radio" name="sex">男
            <input type="radio" name="sex">女
            <input type="radio" name="sex">保密
        </p>
    </form>

复选框（多选框）

通过type值为checkbox设置。
复选框可以通过对自身进行多次点击实现选择或者取消（单选框不可以），多选框也可以选一个或多个。

	<form action="">
        <p>
            爱&nbsp;好：
            <!-- 可以单纯 <input type="checkbox">运动 -->
            <!-- 为了成组出现 还是设置name属性一致 -->
            <input type="checkbox" name="hobby">运动
            <input type="checkbox" name="hobby">绘画
            <input type="checkbox" name="hobby">跳舞
            <input type="checkbox" name="hobby">弹琴
            <input type="checkbox" name="hobby">其他
        </p>
    </form>

单选框和多选框都有一个默认被选择的功能，需要给input标签添加一个checked="checked"

	<form action="">
        <p>
            <!-- 单选框 -->
            性&nbsp;别：
            <input type="radio" name="sex" checked="checked">男
            <input type="radio" name="sex">女
            <input type="radio" name="sex">保密
        </p>
        <p>
            爱&nbsp;好：
            <!-- 可以单纯 <input type="checkbox">运动 -->
            <!-- 为了成组出现 还是设置name属性一致 -->
            <input type="checkbox" name="hobby" checked="checked">运动
            <input type="checkbox" name="hobby">绘画
            <input type="checkbox" name="hobby">跳舞
            <input type="checkbox" name="hobby">弹琴
            <input type="checkbox" name="hobby">其他
        </p>
    </form>

现在如果点击文字是不能触发对应单选或者多选框的点击事件的，所以需要label标签去扩大触发范围。

	<form action="">
        <p>
            <!-- 单选框 -->
            性&nbsp;别：
            <label>
                <input type="radio" name="sex" checked="checked">男
            </label>
            <label>
                <input type="radio" name="sex">女
            </label>
            <label>
                <input type="radio" name="sex">保密
            </label>
        </p>
	</form>

文本域

• 标签是textarea，是一个双标签，且是文本级标签。
• 之前学习的input是单行输入框，只能输入单行文本，如果需要使用多行文本，就使用textarea标签。

属性值rows和cols

1. rows：定义文本域的可视区域有几行，单位是数字
2. cols：当前行显示的字节数量（以英文为准），单位是数字

placeholder：占位符

	<form action="">
        <p>
            <!-- cols列数,数字是几就能写几列文字(站在英语角度 字节数) 
                rows行数,数字是几就能写几行文字 -->
            自我介绍：
            <textarea rows="5" cols="10" placeholder="请输入自我介绍"></textarea>
        </p>
    </form>

也可以通过设置style性的resize属性，值为none，去掉可拖拽区域

	<form action="">
        <p>
            自我介绍：
            <!-- style="resize: none; 去掉可拖拽区域 -->
            <textarea rows="5" cols="10" placeholder="请输入自我介绍" style="resize: none;"></textarea>
        </p>
    </form>

下拉菜单

需要一组标签进行制作：两个标签select和option

• select：选择的意思，表示搭建下拉项
• option：选项的意思，表示搭建下拉项
• 关系：select>option

	<form action="">
        <p>
            籍贯：
            <select>
            	<!-- 默认是第一个选项被显示 -->
                <option>深圳</option>
                <option>上海</option>
                <option>北京</option>
            </select>
        </p>
    </form>

此时刷新页面发现默认是第一个选项显示（而不是选中），添加selected="selected"来决定默认选中项（被选中）

	<form action="">
        <p>
            籍贯：
            <select>
                <option>深圳</option>
                <!-- 设置默认被选中项 -->
                <option selected="selected">上海</option>
                <option>北京</option>
            </select>
        </p>
    </form>