HTML表单用来选择不同种类的用户输入。 示例 文本框:
<html>
<body>
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
这个例子说明了在HTML页面中如何创建文本框。在文本框中,用户可以输入文本。 密码框:
<html>
<body>
<form>
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters.
</p>
</body>
</html>
这个例子说明了在HTML页面中如何创建密码框。 在这个页面的底部,还有更多例子。 表单 表单是一个能够包含表单元素的区域。 表单元素是能够让用户在表单中输入信息的元素(比如文本框,密码框,下拉菜单,单选框,复选框等等)。 表单是用<form>元素定义的。 <form>
<input> <input> </form> Input 最常用的表单标签是<input>标签。Input的类型用type属性指定。最常用的input类型解释如下: 文本框 在表单中,文本框用来让用户输入字母、数字等等。 <form>
First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> 在浏览器中显示如下:
First name:
Last name: 注意,表单本身并不可见。另外,在多数浏览器中,文本框的宽度默认是20个字符。 单选按钮 当需要用户从有限个选项中选择一个时,使用单选按钮。 <form>
<input type="radio" name="sex" value="male">Male <br> <input type="radio" name="sex" value="female">Female </form> 在浏览器中显示如下:
Male
Female 注意,各选项中只能选取一个。 复选框 当需要用户从有限个选项中选择一个或多个时,使用复选框。 <form>
<input type="checkbox" name="bike"> I have a bike <br> <input type="checkbox" name="car"> I have a car </form> 在浏览器中显示如下:
I have a bike
I have a car 表单的action属性和提交按钮 当用户点击提交按钮的时候,表单的内容会被提交到其他文件。表单的action属性定义了所要提交到的目的文件,该目的文件收到信息后通常进行相关的处理。 <form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> 在浏览器中显示如下:
Username:
如果在上面这个文本框中输入一些字符,按下提交按钮以后,输入的字符将被提交到页面“action.asp”。 更多示例: 复选框:
<html>
<body>
<form>
I have a bike:
<input type="checkbox" name="Bike">
<br>
I have a car:
<input type="checkbox" name="Car">
</form>
</body>
</html>
这个例子说明了在HTML页面中如何创建复选框。用户可以选中,也可以取消选择复选框。 单选按钮:
<html>
<body>
<form>
Male:
<input type="radio" checked name="Sex" value="male">
<br>
Female:
<input type="radio" name="Sex" value="female">
</form>
<p>
When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked
</p>
</body>
</html>
这个例子说明了在HTML页面中如何创建单选按钮。 简单的下拉列表:
<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 name="input" action="action.asp" method="get">
Enter your first name:
<input type="text" name="FirstName" value="Mickey">
<br>Enter your last name:
<input type="text" name="LastName" value="Mouse">
<br>
<input type="submit" value="Submit">
</form>
<p>
If you click the "Submit" button, you will send your input to a new page called action.asp.
</p>
</body>
</html>
这个例子说明了在HTML页面中加入表单。这个表单包含了两个文本框和一个提交按钮。 含有复选框的表单:
<html>
<body>
<form name="input" action="action.asp" method="get">
I have a bike:
<input type="checkbox" name="Bike" checked>
<br>
I have a car:
<input type="checkbox" name="Car">
<br>
<input type="submit" value="Submit">
</form>
<p>
If you click the "Submit" button, you send your input to a new page called action.asp.
</p>
</body>
</html>
这个表单包含了两个复选框和一个提交按钮。 含有单选按钮的表单:
<html>
<body>
<form name="input" action="action.asp" method="get">
Male:
<input type="radio" name="Sex" value="Male" checked>
<br>
Female:
<input type="radio" name="Sex" value="Female">
<br>
<input type="submit" value="Submit Now!">
</form>
<p>
If you click the "Submit" button, you will send your input to a new page called action.asp.
</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>
这个例子说明了如何从一个表单发送电子邮件。 |
HTML系列之十-表单
最新推荐文章于 2022-03-25 23:53:06 发布