HTML Forms are used to select different kinds of user input.
HTML表单内可选择各种各样的用户输入方式。

Examples
例子

Text fields
文本方面
This example demonstrates how to create text fields on an HTML page. A user can write text in a text field.
怎样在HTML页面中建立文字框。用户可以在里面输入文字信息。

Password fields
密码方面
This example demonstrates how to create a password field on an HTML page.
演示了怎样在HTML页面上建立一个密码输入框。

Forms
表单

A form is an area that can contain form elements.
一个表单是一块可以含有表单元素的区域。

Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
表单元素包括那些在表单内允许用户输入信息（像文本类的、文本区域类的、下拉菜单、选框、按钮等）

A form is defined with the <form> tag.
一个表单是用<form>标签定义的。

 <input> <input>
</form>

Input
输入

The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.
在表单中用到最多的就是<input>标签了。input(输入)的类型是被其的type(类型)属性所指定的。下面就来把最常用的输入类型给解释下

Text Fields
文本类

Text fields are used when you want the user to type letters, numbers, etc. in a form.
当你想让用户打入字符、数字或者其他一些信息在表单中时文本类的就会被用到。

First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>

How it looks in a browser:
下面是在浏览器里看到的效果：

Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default. 
可以注意到表单自身是不可见的，而且你可以注意到在大多数浏览器中，文本输入框的宽度被默认为20个字符大小。

Radio Buttons
单选按钮

Radio Buttons are used when you want the user to select one of a limited number of choices.
单选按钮经常使用在你需要用户在有限的几个选项中选择其中的一个。

<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>

How it looks in a browser:
浏览器显示效果：

Note that only one option can be chosen.
可以注意到只有一个选项可以被选中。

Checkboxes
复选框

Checkboxes are used when you want the user to select one or more options of a limited number of choices.
复选框被用在你需要用户能够在几个选项中选择一个或者多个选项的时候。

<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>

How it looks in a browser:
浏览器显示效果：

The Form's Action Attribute and the Submit Button
表单的Action(行动)属性以及提交按钮

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
当用户单击“提交”按钮，在表单里的内容都会发送到另外文件。表单的行动属性所定义的名称就所发送内容的目的地。一般被定义的文件都是有接受用户输入的功能。

How it looks in a browser:
浏览器显示效果：

If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "html_form_action.asp". That page will show you the received input.
如果你在文本输入区域内打入一些字符，再单击“提交”按钮，你就会把你输入的字符发送到一个被叫做"html_form_action.asp"的文件上。这个页会显示给你它所受到的信息。

More Examples
更多的例子

Checkboxes
复选框
This example demonstrates how to create check-boxes on an HTML page. A user can select or unselect a checkbox.
这个案例展示了如何在一个HTML页面中创建复选框。用户可以根据需要对多个选项进行选择。

Radio buttons
单选框
This example demonstrates how to create radio-buttons on an HTML page.
这个案例展示了如何在一个HTML页面中创建一个单选框。

Simple drop down box
普通的下拉框
This example demonstrates how to create a simple drop-down box on an HTML page. A drop-down box is a selectable list.
这个案例展示了如何在一个HTML页面中创建一个普通的下拉框。点击后弹出下拉列表进行选择。

Another drop down box
另外一种下拉框
This example demonstrates how to create a simple drop-down box with a pre-selected value.
这个案例展示了如何创建一个包含预选值的下拉框。

Textarea
文本区域
This example demonstrates how to create a text-area (a multi-line text input control). A user can write text in the text-area. In a text-area you can write an unlimited number of characters.
这个案例展示了如何创建一个文本框（支持多行输入）。用户可以在文本框中书写文本。在文本框中，你可以书写无限长的字符。

Create a button
建立一个按钮
This example demonstrates how to create a button. On the button you can define your own text.
这个案例展示了如何创建一个按钮，并在这个按钮上写上文本说明。

Fieldset around data
围绕数据的字段集
This example demonstrates how to draw a border with a caption around your data.
这个案例展示了如何创建 围绕数据的字段集。

Form Examples
表单的例子

Form with input fields and a submit button
有字段输入框以及提交按钮的表单
This example demonstrates how to add a form to a page. The form contains two input fields and a submit button.
这个案例展示了如何创将一张表单添加到网页中。这张表单包含了两个字段输入框和一个提交按钮。

Form with checkboxes
有复选框的表单
This form contains two checkboxes, and a submit button.
这个表单包含了两个复选框和一个提交按钮。

Form with radio buttons
有单选框的表单
This form contains two radio buttons, and a submit button.
这个表单包含了两个单选按钮和一个提交按钮。

Send e-mail from a form
从表单发送EMAIL
This example demonstrates how to send e-mail from a form.
这个案例展示了如何通过表单发送一个E-mail。

Form Tags
表单标签一览

HTML 列表 HTML 图片

评论 (1) 1 All