html入门教程(初学者) -HTML表单 - 书目录

html入门教程(初学者) -HTML表单

HTML表单

<!DOCTYPE html>

<html>

<head>

<title>HTML Forms</title>

</head>

<body>

	<form action="http://www.html.am/html-tutorial/html-forms-action.cfm" method="post">

		<label>Name:

			<input name="name" maxlength="90">

		</label>

		<input type="submit" value="Submit">

	</form>

</body>

</html>

以上是一个HTML表单的例子。表单允许您为HTML文档添加交互性。在这个例子中,用户可以在表单中输入他们的名字。当他们提交表单时,会调用一个处理表单的服务器端脚本。

表单使用<form>元素声明。该元素对用户是不可见的,但它用于封装表单中的任何表单元素。

表单关联元素是可以与表单关联的元素(即表单所有者)。表单关联元素包括输入字段,复选框,单选按钮,提交按钮,textareas等。

这是一个<textarea>元素的例子。这个元素允许用户输入多行文本(与<input>上面的元素相反,它只允许一行文本)。

<form action="http://www.html.am/html-tutorial/html-forms-action.cfm" method="post">

	<label>Comments:

		<textarea name="comments" cols="50" rows="5" maxlength="200"></textarea>

	</label>

	<input type="submit" value="Submit">

</form>

下面是一个表单中更多与表单关联的元素的示例。这些包括我们可以用来对相关元素进行分组并为其提供标题的标签<fieldset>和<legend>标签。我们还为元素type上的属性使用不同的值,<input>从而导致出现不同的控件类型。在这种情况下,我们在文本输入框中添加了复选框和单选按钮。

<form action="http://www.html.am/html-tutorial/html-forms-action.cfm" method="post">

	<label>Name:

		<input type="text" name="name" value="" maxlength="90">

	</label>

	<fieldset>

	<legend>Lunch</legend>

		<label><input type="radio" name="lunch" value="pad-thai"> Pad Thai</label>

		<label><input type="radio" name="lunch" value="tom-yum"> Tom Yum</label>

		<label><input type="radio" name="lunch" value="green-curry"> Green Curry</label>

	<label>Not Spicy<input type="range" min="1" max="10" step="1" value="5" name="spiciness">Very Spicy</label>

	</fieldset>

	<fieldset>

	<legend>Extras</legend>

		<label><input type="checkbox" value="rice" name="rice"> Rice</label>

		<label><input type="checkbox" value="chilli" name="chilli"> Dried Chilli</label>

		<label><input type="checkbox" value="cucumber" name="cucumber"> Cucumber</label>

	</fieldset>

	<input type="submit" value="Submit">

</form>

每个元素都包含一个name属性。提交表单时,脚本可以使用该脚本。如果我们没有给每个元素一个名字,脚本就不知道哪些元素被提交,更不用说它们的值是什么。我们包含value属性以提供用户选择的值。

提交上述表单时,表单内容将被提交到action属性下列出的URL 。在这种情况下,我写了一个脚本,它接受表单元素并显示它们的值。所以,当你提交表单时,你会看到一个元素名称列表,后面跟着它们各自的值。

在复选框的情况下,如果已选择元素名称/值,则只会看到元素名称/值。如果尚未选中,则脚本将无法使用它。这是复选框的工作方式。其他元素传递元素的名称,无论它是否被选中/完成。例如,如果你离开了名称 字段为空,当您提交表单时,您仍然会看到该元素名称,但在其旁边看不到任何值。

表单验证

Web上的大多数表单都包含某种验证,以确保用户已正确完成表单。用户可能犯错,表单验证可以帮助提醒他们在填写表单时可能犯的任何错误。

表单验证也是一项重要的安全预防措施。如果没有良好的表单验证,黑客通过将恶意数据提交到表单字段(特别是文本字段)可以轻松搞定一切。

HTML允许进行一些基本的表单验证。它通过属性来实现这一点。事实上,你可能已经注意到我们的名称 输入字段包括 maxlength=”90″。这可以确保用户不会输入超过90个字符名称领域。我们的假设是我们的访客不会有超过90个字符的名字。但是,我们可以将此数字更改为我们认为合适的数字。

尽管我们可以添加更多验证。例如,我们可以添加required属性以确保用户不会将该字段留空。

必填字段

在下面的例子中,我们已经添加required了两个名称输入栏和单选按钮。现在,如果您尝试提交表单而未完成这些字段,则浏览器应显示一条消息,要求您填写该字段。

所以继续点击 提交无需完成任何字段,并查看浏览器如何响应。不同的浏览器可能会以稍微不同的方式作出响应,但任何现代浏览器都会阻止您在完成所有必填字段之前提交表单。

<form action="http://www.html.am/html-tutorial/html-forms-action.cfm" method="post">

	<div>

	<label for="name">Name:</label>

	<input type="text" name="name" value="" maxlength="90" required>

	</div>

	<div>

	<label for="color">Pick a color:</label>

	<input type="radio" name="color" value="red" required> Red

	<input type="radio" name="color" value="green" required> Green

	<input type="radio" name="color" value="blue" required> Blue

	</div>

	<div>

	<input type="submit" value="Submit">

	</div>

</form>

还有其他的HTML属性,可以提供验证,如type,range,pattern的属性。

该type属性

该<input>字段的type属性可用于确保输入正确的数据类型,并且格式正确。事实上,这就是我们在上面的一些例子中使用的。

以下是可以与该type属性一起使用的更多值。

<form action="http://www.html.am/html-tutorial/html-forms-action.cfm" method="post">

	<label>Email:

		<input type="email" name="email">

	</label>

	<label>Phone:

		<input type="tel" name="phone">

	</label>

	<label>Time:

		<input type="time" name="time" min="7:00" max="23:00" step="900">

	</label>

	<label>Number:

		<input type="number" name="number" min="10" max="150">

	</label>	

	<label>Password:

		<input type="password" name="password">

	</label>		

	<label>Date:

		<input type="date" name="date">

	</label>

	<label>Datetime Local:

		<input type="datetime-local" name="datetime-local">

	</label>

	<label>Search:

		<input type="search" name="search">

	</label>

	<label>URL:

		<input type="url" name="URL">

	</label>	

	<label>Range:

		<input type="range" name="range" min="1" max="100" step="10">

	</label>

	<label>Color:

		<input type="color" name="color">

	</label>

	<input type="submit" value="Submit">

</form>

<style scoped>

label {display:block;}

</style>

JavaScript和服务器端验证

许多网站包含几个表单验证层。您可以从HTML验证开始(如此处所示),但这只会带您到目前为止。

您还可以包含JavaScript验证,这可以使您对验证更具体。与HTML一样,JavaScript可以运行客户端(即从浏览器内部,而不是在服务器上),因此验证通常非常快速且响应迅速。

一旦数据提交给服务器,表单处理程序脚本也应验证数据。这称为服务器端验证(因为它在服务器上运行)。服务器端验证通常在整个表单完成并提交后运行。但是,也可以在提交表单之前运行服务器端代码(即,在用户完成每个字段时)。这通常称为实时验证或即时验证。

服务器端验证可能比客户端慢一点,因为它需要将请求发送到服务器,然后返回到客户端/用户。然而,服务器端验证是最好的防御黑客的方法,因为黑客可能会绕过你的表单(即绕过你的客户端验证),并直接调用表单处理程序脚本。例如,他们可以创建自己的表单,然后将其提交给表单处理程序。他们还可以创建一个包含与您匹配的字段名称和值的URL,然后将该链接作为钓鱼电子邮件骗局的一部分发送。这就是为什么好的服务器端验证非常重要的原因。

这个HTML教程的范围超出了服务器端脚本和验证的范围。不过,如果您有兴趣,请查看此表单以发送电子邮件并向下滚动至“发送邮件”脚本 (这就是所谓的 send_mail.php)。这是一个表单处理程序脚本(用PHP编写)的示例,其中包含一些服务器端验证。