在这里,我们将通过示例学习有关HTML表单处理的所有信息。HTML表单提供用户与网站的交互。
有时,您需要开发一个需要用户交互的网站。例如,需要开发一个铁路网站,使用户可以在Internet上检查火车的到达或离开状态。该网站使用注册或登录表格来收集用户信息,并将信息提交给服务器以进行进一步处理。这些类型的表单提供了网站及其在Internet上的用户之间进行交互的媒介。
表单是网页的一个区域,允许用户以多种方式提供其信息,例如通过输入文本字段或通过从提供的列表中选择一个或多个可用选项。
HTML可以使用FORM
标记在网页中添加表单。在网页上添加表单后,可以使用各种标签在表单上添加各种控件,例如按钮和文本字段。这些常用的元素有:INPUT
,BUTTON
,TEXTAREA
和DATALIST
。
INPUT
标记输入不同类型的值,例如日期,时间和电子邮件地址。 BUTTON
标记用来添加按钮,例如表单上的提交和取消按钮,以提交或取消表单的详细信息。 TEXTAREA
标签用来在指定区域中输入文本。 DATALIST
标记用来通过提供一组预定义值在文本字段中输入文本。
我们将在单独的教程中了解有关表单处理的所有信息:
HTML表单示例
以下是有关HTML中表单处理的一些示例。
HTML表单示例1
下面是有关HTML表单的示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML教程</title>
<meta name="author" content="xntutor.com" />
<style>
</style>
</head>
<body>
<h2>HTML表单示例</h2>
在 form 标签之前
<form>
在 form 标签中
</form>
在 form 标签后
</body>
</html>
在浏览器中打开上面示例代码文件,显示结果如下:
HTML表单示例2
下面是另一个HTML表单示例。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML教程</title>
<meta name="author" content="xntutor.com" />
<style>
</style>
</head>
<body>
<h2>HTML表单示例</h2>
<form>
输入姓名: <input>
</form>
</body>
</html>
在浏览器中打开上面示例代码文件,显示结果如下:
HTML表单示例3
以下是HTML表单的另一个示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML教程</title>
<meta name="author" content="xntutor.com" />
<style>
</style>
</head>
<body>
<h2>HTML表单示例</h2>
<form>
输入姓名: <input type="text" name="name">
</form>
</body>
</html>
在浏览器中打开上面示例代码文件,显示结果如下:
HTML表单示例4
以下是HTML表单的另一个示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML教程</title>
<meta name="author" content="xntutor.com" />
<style>
</style>
</head>
<body>
<h2>HTML表单示例</h2>
<form>
输入2位数字编码: <input type="text" name="code" size="2" maxlength="2">
</form>
</body>
</html>
在浏览器中打开上面示例代码文件,显示结果如下:
HTML表单示例5
以下是HTML表单的另一个示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML教程</title>
<meta name="author" content="xntutor.com" />
<style>
</style>
</head>
<body>
<h2>HTML表单示例</h2>
<form>
输入密码: <input type="password">
</form>
</body>
</html>
在浏览器中打开上面示例代码文件,显示结果如下:
HTML表单示例6
以下是HTML表单的另一个示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML教程</title>
<meta name="author" content="xntutor.com" />
<style>
</style>
</head>
<body>
<h2>HTML表单示例</h2>
<form>
输入密码: <input type="password" name="passw" size="12" maxlength="12">
</form>
</body>
</html>
在浏览器中打开上面示例代码文件,显示结果如下:
HTML表单示例7
以下是HTML表单的另一个示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML教程</title>
<meta name="author" content="xntutor.com" />
<style>
</style>
</head>
<body>
<h2>HTML表单示例</h2>
<form>
输入姓名: <input type="text" id="name" /><br/>
<input type="hidden" id="country" value="xntutor.com" /><br/>
<input type="submit" onclick="alert('Hello ' +
document.getElementById('name').value + ', 你好 ' +
document.getElementById('country').value)" value="提交">
</form>
</body>
</html>
在浏览器中打开上面示例代码文件,显示结果如下:
在这里输入名字:xntutor。 输入名称后,按ENTER键或单击Submit按钮。 然后,将看到以下输出:
HTML表单示例8
以下是HTML表单的另一个示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML教程</title>
<meta name="author" content="xntutor.com" />
<style>
</style>
</head>
<body>
<h2>HTML表单示例</h2>
<fieldset>
<legend>登录表单</legend>
<label>
用户名: <input type="text">
</label>
<br/>
<label>
密码: <input type="password">
</label>
<br/>
<label>
<input type="submit" name="submit" value="登录">
</label>
</fieldset>
</body>
</html>
在浏览器中打开上面示例代码文件,显示结果如下: