HTML - 表格

  »   HTML  »   HTML教程 - 在HTML生成表单

表格是使用于一个网站管理员收集有关互联网用户的重要信息的最重要的工具之一,如电子邮件,姓名,地址,电话或任何其他类型的信息。

根据必要,此信息甚至可以存储在一个文件中。 你可以统计,登记表格或订阅在你的网页所提供的信息和其他很多,等等。

TML - 文本域

在深入细节之前,我们要揭露一个小表单的基础知识。 文本域已经得到了必须从一开始提到的几个属性:

  • type - 建立了文本域的类型。例如:文本,发送或密码。
  • name - 提供对于在稍后的日期进一步参考的域名称。
  • size - 设置字域的大小。
  • maxlenght - 字符可键入的最大值。
html<form method="post" action="mailto:youremail@email.com">
	Name: <input type="text" size="10" maxlength="40" name="name" /><br />
	Password: <input type="password" size="10" maxlength="10" name="password" />
</form>

Demo

Name:
Password:

请勿使用此代码。从表单数据将不被加密并在安全方面不会安全。

HTML - 电子邮件形式

现在让我们来添加发送按钮,我们应该? 通常,发送按钮应该在最后而具有命名为“发送”,“提交”的属性, 或周围的东西。

我们还需要指定在表单中输入的数据的目的地,以及传输模式。 这可以通过添加以下表单属性做到:

  • method - 我们将使用“发送”的方法。这与不显示用户的细节插入信息的表单发送。
  • action - 这将被用于指定信息将被发送的URL。
html<form method="post" action="mailto:youremail@email.com">.

	Name: <input type="text" size="10" maxlength="40" name="name" /><br />
	Password: <input type="password" size="10" maxlength="10" name="password" /><br />
	
	<input type="submit" value="Send" />
	
</form>

Demo

. Name:
Password:

为了它工作,就得改其电子邮件地址为一个真实的!

HTML - 单选按钮

单选按钮是非常普及,有用和易于使用的。最常用的例子是与一个以上答案选项的问题。 其必须知道的属性为如下:

  • value - 指定将在其中用户选择某个按钮的情况下被发送。只有一个值将被发送。
  • name - 决定哪些按钮集并让选择的按钮属于。
html<form method="post" action="mailto:youremail@email.com">

	<p>你穿什么样的鞋子?</p>
	
	<label>Color:</label> <br />
	<input type="radio" name="color" value="dark" /> Dark <br />
	<input type="radio" name="color" value="light" /> Light <br />
	
	<label>Size:</label> <br />
	<input type="radio" name="size" value="small" /> Small <br />
	<input type="radio" name="size" value="average" /> Average <br />
	<input type="radio" name="size" value="big" /> Big <br />
	
	<input type="submit" value="自己发电子邮件" />
</form>

Demo

你穿什么样的鞋子?


Dark
Light

Small
Average
Big

在你将替换电子邮件地址的情况下,您会收到一封电子邮件,其中包含: 'size=(choose) color=(choose)'.

HTML - 复选框

使用复选框用户已经得到了选择一个的可能性,两个或两个以上的答案变体。名称和值属性用于相同的单选按钮。

html<form method="post" action="mailto:youremail@email.com">

	<p>你喜欢什么颜色的鞋?</p>

	<input type="checkbox" name="shoes" value="black" /> 简单的黑色 <br/>
	<input type="checkbox" name="shoes" value="white" /> 简单的白色 <br/>
	<input type="checkbox" name="shoes" value="gray" /> 灰色阴影 <br/>
	<input type="checkbox" name="shoes" value="black&white" /> 黑色和白色<br/>
	
	<input type="submit" value="Email Myself" />
</form>

Demo

你喜欢什么颜色的鞋?

简单的黑色
简单的白色
灰色阴影
黑色和白色

HTML - 另一种类型的列表表单

列表表单的另一种模型为如下, 在用户选择一个特定的行时,将作为所选择的选项被发送的。

html<form method="post" action="mailto:youremail@email.com">
	<p>Musical preferences</p>
	
	<select multiple name="music" size="4">
		<option value="emo" selected>Emo</option> 
		<option value="metal/rock" >Metal/Rock</option> 
		<option value="hiphop" >Hip Hop</option> 
		<option value="ska" >Ska</option> 
		<option value="jazz" >Jazz</option> 
		<option value="country" >Country</option> 
		<option value="classical" >Classical</option> 
		<option value="alternative" >Alternative</option> 
		<option value="oldies" >Oldies</option> 
		<option value="techno" >Techno</option> 
	</select><br />
	
	<input type="submit" value="自己发电子邮件" />
</form>

Demo

Musical preferences


另一种模式是“下拉式”菜单。 这将被显示为字域,这将随后示出当一个点击发生在其上的列表。

html<form method="post" action="mailto:youremail@email.com">
	<p>教育程度?</p>
	
	<select name="教育">
		<option>挑选</option>
		<option>高中</option> 
		<option>学院</option>
		<option>博士学位</option>
	</select><br />
	
	<input type="submit" value="自己发电子邮件" />
</form>

Demo

教育程度?


HTML - 上载表单

首先,它必须提到该表单仅是接口,可见部分与该用户将能够一起工作。为了完成一个上载表单PHP和Perl的知识和技能,更不用提JavaScript。

上载表单是由许多部分组成。我们将通过建立,我们将上载的文件大小开始。做这件事是使用隐藏域。在此之后,我们将创建域中,用户将能够写入文件的地址或将能够浏览它的“探索”窗口。

html<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />

Demo

HTML - 文本区域, 注解

通常, 文本区域是用于发送注解的。 博格与公开论淡是使用这些选项之主要的网页。 不仅如此, 在主要的问题上为了查看他们用户的见解有很多网站使用这些文本区域。

要创建一个文本区域,我们先将在文字域标签内会指定rows和cols属性, 'Rows' 会制定其场域的高度而'cols'是它的宽度,就如其文字的意思一样。 如下列例子,每20个文字有5个行。同样我们必须指定属于它们的warp标签属性:

  • wrap=
    1. "off"
    2. "虚拟的"
    3. "物理上的"
html<form method="post" action="mailto:youremail@email.com">

	<textarea rows="5" cols="20" wrap="物理上的" name="注解">写一个注解</textarea><br />
	<input type="submit" value="自己发送邮件" />
	
</form>

Demo


并且一定要提到,你将在文本域里会写并描述之它们的每一个东西的。