HTML常用标签及介绍（二）

form表单标签是很重要的一个标签，当用户前后端有数据交互的时候，form表单是不可缺少的。

一、form表单的定义与用法

1.标签用于为用户输入创建 HTML 表单。
2.表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
3.表单用于向服务器传输数据。
注释：form 元素是块级元素，其前后会产生折行。

用法：<form action="" method="" enctype="" autocomplete="">

二、常用的表单元素

【input标签】

表示输入框，有多种形式，可以根据type属性来确定显示哪种输入框。

用法：<input name="" type="属性" >

input属性	说明
text	单行文本输入，可用于输入账号
password	密码输入框
radio	单选框
check	多选框
date	日期显示
datetime	时间显示
button	普通按钮（多用于JS绑定事件）
reset	重置
submit	提交
textarea	超大的文本框，可用于写简介
select	下拉菜单

三、常用表单元素的用法

强调：input\select\textarea 都要有name属性

【text元素】

用于建立一个单行文本输入框

用法：
 <p>
        <label for="yhm">用户名：</label>
        <input id="yhm" name="username" type="text" readonly>
        <input name="username" type="text" placeholder="小强" disabled>
    </p>

【password元素】

用于建立密码输入框

<p>密码：
        <input name="password" type="password">
    </p>

【radio元素】

用于创建单选框

<p>性别：
        <input name="gender" type="radio" value="1">男
        <input name="gender" type="radio" value="0">女
        <input checked name="gender" type="radio" value="2">保密
    </p>

注意：其中只有name相等时，才可以进行单选，否则可以多选。

【checkbox元素】

用于创建多选框

<p>爱好：
        <input name="bobby" type="checkbox" value="football">足球
        <input name="hobby" type="checkbox" value="doublecolorball">双色球
        <input name="hobby" type="checkbox" value="basketball">篮球
    </p>

【textarea属性】

用于创建超大的文本框，一般用于写简介

<p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>

注意：cols为列数 rows为行数

【select属性】

用来创建下拉菜单

<select name="form1" id="" multiple>
            <option value="sx">陕西</option>
            <option value="sc">四川</option>
        </select>

    <p>
        <select name="form2" id="">
            <optgroup label="北京">
                <option value="hd">海淀区</option>
                <option value="cy">朝阳区</option>
            </optgroup>
        </select>
    </p>

注意：
readonly为只读，即只能读取文本框中的内容不可修改
disabled为禁用一个input元素，即不能对input元素进行任何操作
value=“ xxx”为设置文本框中的默认值（实际存在）
placeholder=“xxx”为设置一个灰色的默认值（不是实际存在的值）