1.表单标签
表单主要用于收集网页上浏览者的相关信息，其标签为：<form>...</form>，其基本语法格式如下：👇👇👇
<form action="url" method="get" enctype="mime"> </form>
其中，action中的内容指定处理提交表单的格式，它可以是一个URL地址或者一个电子邮件地址。method中的内容指明提交表单的HTTP方法。enctype中的内容指明用来把表单提交给服务器时的互联网媒体形式。
简单的实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <form> 下面是用户登录信息 <br/> 用户名称 <input type="text" name="user"/> <br/> 用户密码 <input type="password" name="password"/> <br/> <input type="submit" value="登录"/> </form> </body> </html>
2.文字字段
文本框是一种让访问者自己输入内容的表单对象，通常用来填写单个字或者简单的回答，代码格式如下：👇👇👇
<input type="text" name="..." size="..." maxlength="..." value="...">
其中，type="text"定义单行文本输入框。
name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称。
size属性定义文本框的宽度，单位是单个字符宽度。
maxlength属性定义最多输入的字符数。
value属性定义文本框的初始值。具体实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <form> 请输入您的姓名 <input type="text" name="yourname" size="20" maxlength="15"/> <br/> 请输入您的地址 <input type="text" name="youraddress" size="20" maxlength="15"/> </form> </body> </html>
多行文本输入框主要用于输入较长的文本信息，代码格式如下：👇👇👇
<textarea name="..." cols="..." rows="..." wrap="..."> </textarea>
其中，name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称。
cols属性定义多行文本框的宽度；rows属性定义多行文本框的高度。
wrap属性定义输入内容大于文本域时的显示方式。具体实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <form> 请简述您最近的学习情况<br/> <textarea name="yourstudy" cols="50" rows="10"></textarea> <br/> <input type="submit" value="提交"/> </form> </body> </html>
密码输入是一种特殊的文本域，主要用于输入一些保密信息。当网页浏览者输入文本时，显示的是黑点或者其他符号，这样就增加了输入文本的安全性。代码格式如下：👇👇👇
<input type="password" name="..." size="..." maxlength="..."/>
其中，type="password"定义密码框。name属性定义密码框的名称，要保证唯一性。
size属性定义密码框的宽度。maxlength属性定义最多输入的密码字符数。具体实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <form> 用户姓名： <input type="text" name="yourname"/><br/> 登录密码： <input type="password" name="yourpassword"/><br/> </form> </body> </html>
单选按钮主要是让网页浏览者在一组选项里选择一个。代码格式如下：👇👇👇
<input type="radio" name="..." value="..."/>
其中，type="radio"定义单选按钮。
name属性定义单选按钮的名称，单选按钮都是以组为单位使用的，在同一组中的单选选项都必须使用同一个名称。
value属性定义单选按钮的名称，在同一组中，它们的值必须是不同的。具体实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <form> 请选择您感兴趣的图书类型：<br/> <input type="radio" name="book" value="Book1"/>网站编程<br/> <input type="radio" name="book" value="Book2"/>办公软件<br/> <input type="radio" name="book" value="Book3"/>设计软件<br/> <input type="radio" name="book" value="Book4"/>网络管理<br/> <input type="radio" name="book" value="Book5"/>黑客攻防<br/> </form> </body> </html>
复选框主要是让网页浏览者在一组选项里同时选择多个选项（也即多选框），每个复选框都是一个独立的元素，都必须有一个唯一的名称。代码格式如下：👇👇👇
<input type="checkbox" name="..." value="..."/>
其中，type="checkbox"定义复选框。
name属性定义复选框的名称，在同一组中的复选框都必须用同一个名称。
value属性定义复选框的值。具体实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <form> 请选择您感兴趣的图书类型：<br/> <input type="checkbox" name="book" value="Book1"/>网站编程<br/> <input type="checkbox" name="book" value="Book2"/>办公软件<br/> <input type="checkbox" name="book" value="Book3"/>设计软件<br/> <input type="checkbox" name="book" value="Book4"/>网络管理<br/> <input type="checkbox" name="book" value="Book5"/>黑客攻防<br/> </form> </body> </html>
使用 select + option 可以创建单选或多选下拉菜单。具体实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <select> <option>列表1</option> <option>列表2</option> <option>列表3</option> <option>列表4</option> </select> </body> </html>
在运行结果中，点击下拉菜单的小箭头，即可看到我们设置的下拉菜单中的几个选项：列表1、列表2、列表3、列表4。
列表框主要用于在有限的空间里设置多个选项，即可用作单选，也可用作多选。代码格式如下：👇👇👇
<select name="..." size="..." multiple> <option value="..." selected>...</option> </select>
其中，size属性定义下拉选择框的行数。name属性定义下拉选择框的名称。
multiple属性表示可以多选，如果不设置本属性，那么只能单选。
value属性定义选择项的值。selected属性表示默认已经选择本选项。具体实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <form> 请选择您感兴趣的图书类型：<br/> <select name="book" size="3" multiple> <option value="Book1" selected>网站编程</option> <option value="Book2">办公软件</option> <option value="Book3">设计软件</option> <option value="Book4">网络管理</option> <option value="Book5">黑客攻防</option> </select> </form> </body> </html>
普通按钮用来控制其他定义了处理脚本的处理工作。代码格式如下：👇👇👇
<input type="button" name="..." value="..." onclick="...">
其中，type="button"定义普通按钮。name属性定义普通按钮的名称。value属性定义按钮的显示文字。
onclick属性表示单击行为，也可以是其他的事件，通过指定脚本函数来定义按钮的行为。
具体实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <form> 点击下面的按钮，把文本框1中的内容复制到文本框2中：<br/> 文本框1：<input type="text" id="field1" value="学习HTML的技巧"/><br/> 文本框2：<input type="text" id="field2"/><br/> <input type="button" name="..." value="点击我" onclick="document.getElementById('field2').value =document.getElementById('field1').value"/> </form> </body> </html>
上图的运行结果中，在文本框1中输入相应的内容，之后点击下面的按钮“点击我”即可将文本框1的内容复制到文本框2中。
提交按钮用来将输入的信息提交到服务器。代码格式如下：👇👇👇
<input type="submit" name="..." value="..."/>
其中，type="submit"定义提交按钮。name属性定义提交按钮的名称。
value属性定义按钮的显示文字。通过提交按钮可以将表单里的信息提交给表单里action所指向的文件。
具体实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <form action="https://www.baidu.com" method="get"> 请输入你的姓名： <input type="text" name="name"/><br/> 请输入你的电话： <input type="text" name="telephone"/><br/> 请输入你的身份证号： <input type="text" name="IDCard"/><br/> <input type="submit" value="提交"/> </form> </body> </html>
在以上三个文本框中输入相应的内容，之后点击“提交”按钮，即可实现将表单中的数据发送百度的首页（action="https://www.baidu.com"）。
重置按钮用来重置表单中输入的信息。代码格式如下：👇👇👇
<input type="reset" name="..." value="..."/>
其中，type="reset"定义重置按钮。name属性定义重置按钮的名称。value属性定义按钮的显示文字。
具体实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <form> 请输入用户名称： <input type="text" name="name"/><br/> 请输入用户密码： <input type="password" name="password"/><br/> <input type="submit" value="登录"/> <input type="reset" value="重置"/> </form> </body> </html>
以上运行结果中，在两个文本框中输入相应的内容，点击“重置”按钮即可清空两个文本框中的所有内容。
