HTML表单页面的运用

本章目标:掌握表单基本结构<form>

掌握各种表单元素
能理解post和get两种提交方式的区别

本章重点:掌握各种表单元素

本章难点:post和get两种提交方式的区别

 

一、    HTML表单

表单:

表单是一个能够包含表单元素的区域。

表单元素是能够让用户在表单中输入信息的元素(比如文本框,密码框,下拉菜单,单选框,复选框等等)。

表单是用<form>元素定义的:

 

 

Input:

最常用的表单标签是<input>标签。Input的类型用type属性指定。最常用的input类型解释如下:


文本框:在表单中,文本框用来让用户输入字母、数字等等。

 

单选按钮:当需要用户从有限个选项中选择一个时,使用单选按钮。

 

注意,各选项中只能选取一个。

 

复选框:当需要用户从有限个选项中选择一个或多个时,使用复选框。

 

表单的action属性和提交按钮:当用户点击提交按钮的时候,表单的内容会被提交到其他文件。表单的action属性定义了所要提交到的目的文件,该目的文件收到信息后通常进行相关的处理。

 

如果在上面这个文本框中输入一些字符,按下提交按钮以后,输入的字符将被提交到页面“action.asp”。

 

更多示例:

 

简单的下拉列表:

 

<html>

<body>

<form>

<select name="cars">

<option value="volvo">Volvo

<option value="saab">Saab

<option value="fiat">Fiat

<option value="audi">Audi

</select>

</form>

</body>

</html>

 

 

这个例子说明了在HTML页面如何创建下拉列表。下拉列表是可以选择的列表。

 

预选的下拉列表:

<html>

<body>

<form>

<select name="cars">

<option value="volvo">Volvo

<option value="saab">Saab

<option value="fiat" selected>Fiat

<option value="audi">Audi

</select>

</form>

</body>

</html>

 

 

这个例子说明了如何创建一个含有预先选定元素的下拉列表。

 

文本域:

<html>

<body>

<p>

This example demonstrates a text-area.

</p>

<textarea rows="10" cols="30">

The cat was playing in the garden.

</textarea>

</body>

</html>

 

 

这个例子说明了如何创建文本域(多行文本),用户可以在其中输入文本。在文本域中,字符个数不受限制。

 

创建按钮:

 

<html>

<body>

<form>

<input type="button" value="Hello world!">

</form>

</body>

</html>

 

 

这个例子说明了如何创建按钮。按钮上的文字可以自己定义。

 

数据周围的标题边框:

<html>

<body>

<fieldset>

<legend>

Health information:

</legend>

<form>

Height<input type="text" size="3">

Weight<input type="text" size="3">

</form>

</fieldset>

<p>

If there is no border around the input form, your browser is too old.

</p>

</body>

</html>

 

 

这个例子说明了如何在数据周围画带有标题的边框。

 

从表单发送电子邮件:

<html>

<body>

<form action="MAILTO:someone@w3schools.com"  method="post"

enctype="text/plain">

<h3>This form sends an e-mail to W3Schools.</h3>

Name:<br>

<input type="text" name="name" value="yourname" size="20">

<br>

Mail:<br>

<input type="text" name="mail" value="yourmail" size="20">

<br>

Comment:<br>

<input type="text" name="comment" value="yourcomment" size="40">

<br><br>

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

<input type="reset" value="Reset">

</form>

</body>

</html>

 

 

这个例子说明了如何从一个表单发送电子邮件

posted @ 2018-08-07 22:22  borter  阅读(937)  评论(0编辑  收藏  举报