学习html中的表单标签＜form＞

1 了解表单

表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。表单在网页上随处可见，可用于登录页面输入账号、客户留言、搜索产品等。

2 表单标签<form></form>

<form>的常用属性：

name属性：表单的名字，在一个网页中用于唯一识别一个表单。

action属性：表单处理的方式，往往是E-mail地址或网址。

method属性：表单数据的传送方向，是获得（GET）表单还是送出（POST）表单。

3 常见的表单元素：

<input>元素：

1 定义：

<input>元素用来定义用户输入数据的输入字段，根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数值、范围、图像、文件等。

2 基本语法及格式：

<input type="表项类型" name="表项名" value="默认值" size="x" maxlength="y"/>

3 <input>元素的输入字段：

（1）文字和密码的输入。使用<input>元素的type属性，可以在表单中加入表项，并控制表项的风格。例如：type 属性值为text，则输入的文本以字符显示；而type属性值为password，则输入的每个字符显示为符号“ * ”。在表项前应加入表项的名称，如“您的姓名”等，以告诉访问者在随后的表项中应该输入的内容。文本框和密码框的格式为：
                                                <input type="text" name-"文本框名">
                                                <input type="password" name="密码框名”>

<form>
<!-- 当type="text"时，该input框为普通文本输入框 -->
        账户：<input type="text">

        <br>

<!-- 当type="text"时，该input框为密码输入框 -->
        密码：<input type="password">
</form>

 （2）重置和提交。表单按钮用于控制网页中的表单。表单按钮有4种类型，即提交按钮、重置按钮、普通按钮和图片按钮。

使用提交按钮（submit）可以将填写在文本域中的内容发送到服务器。

使用重置按钮（reset）可以将表单输入框的内容恢复为初始值。

使用普通按钮（button）可以制作一个用于触发事件的按钮。

使用图片按钮(image)可以制作一个带有图片的美观按钮。

        按钮的格式为：
                                        <input type="submit" value="按钮名">

                                        <input type="reset" value="按钮名">

                                        <input type="button" value="按钮名">

                                        <input type="image" src="图片来源">

<form>
<!-- 当type="submit"时，该input框变成普通的提交按钮-->
        <input type="submit" value="登录">

<!-- 当type="reset"时，该input框变成普通的重置按钮-->
        <input type="reset" value="清除">
</form>

（3）复选框和单选钮。在页面中有些地方需要列出几个项目，让访问者通过选择钮进行选择。选择钮可以是复选框(checkbox)或单选钮(radio)。

用<input>元素的type属性可设置选择钮的类型；

value属性可设置该选择钮的控制初值，用以告诉表单设计者选择的结果；

checked属性表示是否为默认选中项；

name属性是控制名；

同一组的选择钮的控制名是一样的。

复选框和单选钮的格式为：
        <input type="checkbox" name="复选框名" value="提交值" checked="checked">
        <input type="radio" name="单选钮名" value="提交值" checked="checked">

<form>        
    性别：
    <!-- 当type="radio"时，该input框变成普通的多选框-->
    <!-- 注意： 想要input标签变成单选框，需要设置相同的name属性 -->
    <input type="radio" name="item" id="item1">男
    <input type="radio" name="item" id="item2">女
    <input type="radio" name="item" id="item3">跨性别
</form>

<form>        
    爱好：
    <!-- 当type="checkbox"时，该input框变成普通的多选框-->
    <input type="checkbox" name="item1" id="item1">听音乐
    <input type="checkbox" name="item2" id="item2">玩游戏
    <input type="checkbox" name="item3" id="item3">读书
</form>

（4）电子邮件输入框。当用户需要通过表单提交电子邮件信息时，可以将<input>元素的type属性设置为email类型，即可设计用于包含email地址的输入框。

当用户提交表单时，会自动验证输入email值的合法性

格式为：
                                        <input type="email" name="电子邮件输入框名">

<form>
    <input type="text" name="email" id="email">
</form>

（5）日期时间选择器。HTML5提供了日期时间选择器 date pickers，其拥有多个可做选取日期和时间的新型输入文本框，类型如下：
①date：选取日、月、年

②month：选取月、年

③week：选取周和年

④time：选取时间（小时和分钟）

⑤datetime：选取时间日、月、年（UTC世界标准时间）

⑥datetime-local：选取时间日、月、年（本地时间）

日期时间选择器的语法格式为：
                                        <input type="选择器类型"name="选择器名“>

<form>
<input type="datetime-local" name="date">
</form>

（6）URL输入框。当用户需要通过表单提交网站的URL地址时，可以将<input>元素的type 属性设置为url类型，即可设计用于包含URL地址的输入框。当用户提交表单时，会自动验证输入url值的合法性，格式为：
                                        <input type="url" name="url输入框名”>

（7）数值输入框。当用户需要通过表单提交数值型数据时，可以将<input>元素的type属性设置为number类型，即可设计用于包含数值型数据的输入框。当用户提交表单时，会自动验证输入数值型数据值的合法性，格式为：
                                        <input type="number" name="数值输入框名”>

（8）范围滑动条。当用户需要通过表单提交一定范围内的数值型数据时，可以将<input>元素的type属性设置为range类型，即可设计用于设置输入数值范围的滑动条。当用户提交表单时，会自动验证输入数值范围的合法性，格式为：
                                        <input type="range" name="范围滑动条名">

另外，用户在使用数值输入框和范围滑动条时可以配合使用max(最大值）、min(最小值）、step(数字间隔）和value（默认值）属性对数值进行一系列限定。

<select>元素：

1 定义：

当浏览者选择的项目较多时，如果使用选择钮来选择，会占据页面的较大空间，这时可以用<select>标签和<option>标签来设置选择栏。选择栏可分为弹出式和字段式两种。

2 <select>标签格式：

<select>标签的格式为：

<select size="x" name="控制操作名" multiple>
        <option...> ... </option>
        <option...>...</option>
</select>

3 <select >属性：

（1）size：可选项，用于改变下拉框的大小。size属性的值是数字，表示显示在列表中选项的数目，当size 属性的值小于列表框中的列表项数目时，浏览器会为该下拉框添加滚动条，用户可以使用滚动条来查看所有的选项，size默认值为1。
（2)  name：选择栏的名称。
（3)  multiple：如果选择该属性，表示允许用户从列表中选择多项。

<option>标签：

1 <option>标签格式：

<option value="可选择的内容" selected ="selected">...</option>

2 <option>标签属性：

（1) selected：用来指定选项的初始状态，表示该选项在初始时已经被选中。

（2) value：用于设置当某一选项被选中并提交后，浏览器传送给服务器的数据。
选择栏有两种形式：字段式选择栏和弹出式选择栏。字段式选择栏与弹出式选择栏的主要区别在于，前者在<select>中的size属性值取大于1的值，此值表示在选择栏中不拖动滚动条可以显示的选项的数目。

多行文本域<textarea>：

1 定义：

在意见反馈栏中往往需要访问者发表意见和建议，且提供的输入区域一般较大，可以输入较多的文字。

使用< textarea>标签可以定义高度超过一行的文本输入框，<textarea>标签是成对标签，开始标签<textarea>和结束标签</textarea>之间的内容就是显示在文本输入框中的初始信息，

2 格式为：                               

                                <textarea name="文本域名"rows="行数"cols="列数">
                                        初始文本内容

                                </textarea>
        其中的行数和列数是指不拖动滚动条就可看到的区域。

4 表单练习：

请做出以下网页：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
</head>
<body>
    <form>
    <h2 align="center">用户注册</h3>

    <table  width="500" border="1" align="center" bordercolor="">
    
    <tr>
        <td width="100" height="20" align="right">用户名</td>
        <td width="400" height="20" align="left">
            <input type="text" name="username"  id="username" size="20" maxlength="12" value="请在此处输入您的用户名">
        </td>
    </tr>
    <tr>
        <td width="100" height="20" align="right">密码</td>
        <td width="400" height="20" align="left">
            <input type="passdword" name="pass" id="pass" size="12" maxlength="12" >
        </td>
    </tr>
    <tr>
        <td width="100" height="20" align="right">确认密码</td>
        <td width="400" height="20" align="left">
            <input type="passdword" name="pass" id="pass" size="12" maxlength="12" >
        </td>
    </tr>
    <tr>
        <td width="100" height="20" align="right">性别</td>
        <td width="400" height="20" align="left">
            <input type="checkbox" name="item" id="item1">男
            <input type="checkbox" name="item" id="item2">女</td>
    </tr>
    <tr>
        <td width="100" height="20" align="right">出生日期</td>
        <td width="400" height="20" align="left">
            <input type="text" name="date" id="date" size="30">
        </td>
    </tr>
    <tr>
        <td width="100" height="20" align="right">联系电话</td>
        <td width="400" height="20" align="left">
            <input type="text" name="phone" id="phone" size="13" maxlength="13">
        </td>
    </tr>
    <tr>
        <td width="100" height="20" align="right">电子邮件</td>
        <td width="400" height="20" align="left">
            <input type="text" name="email" id="email" size="30" maxlength="30">
        </td>
    </tr>
    <tr>
        <td width="100" height="20" align="right">最高学历</td>
        <td width="400" height="20" align="left">
            <input type="radio" name="grade" value="中专" >中专
            <input type="radio" name="grade" value="大专" >大专
            <input type="radio" name="grade" value="本科" >本科
            <input type="radio" name="grade" value="研究生" >研究生
        </td>
    </tr>
    <tr>
        <td width="100" height="20" align="right">爱好</td>
        <td width="400" height="20" align="left">   
            <input type="checkbox" name="like" value="上网">上网
            <input type="checkbox" name="like" value="篮球">篮球
            <input type="checkbox" name="like" value="听歌">听歌
            <input type="checkbox" name="like" value="下棋">下棋
        </td>
    </tr>
    <tr>
        <td height="20"colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;
            <input type="submit" name="Submit" value="提交">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" name="Submit2" value="重写"></td>
    </tr>
    </table>
    </form>
</body>
</html>