Latest web development tutorials

formulario HTML

Formularios HTML se utilizan para recoger los diferentes tipos de entrada del usuario.


Ejemplos

ejemplos en línea

Crear un campo de texto (campo de texto)
Este ejemplo muestra cómo crear un campo de texto en la página HTML. El usuario puede escribir texto en un campo de texto.

Crear un campo de contraseña
Este ejemplo muestra cómo crear un campo de contraseña HTML.

(Al final de esta página se pueden encontrar más ejemplos).


formulario HTML

La forma es una región que contiene los elementos del formulario.

elemento de formulario es permitir al usuario introducir contenido en forma, por ejemplo: texto campos (área de texto), listas desplegables, botones de radio (radio-botones), casillas de verificación (checkboxes) y así sucesivamente.

Formulario utiliza etiquetas de formulario <form> conjunto:

<form>
.
input 元素
.
</form>


Formularios HTML - Los elementos de entrada

En la mayoría de los casos son etiqueta de formulario utilizado es una etiqueta de entrada (<input>).

El tipo de entrada es el atributo (tipo) definiciones de tipos. Con mayor frecuencia los tipos de entrada utilizados son los siguientes:


campo de texto (Text Fields)

A través de campo de texto <input type = "text"> para establecer cuando el usuario escribir letras, números y otros contenidos en una forma, se utilizará el campo de texto.

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

El navegador muestra lo siguiente:

Nombre:
Apellido:

Nota: La forma en sí misma no es visible.Además, en la mayoría de los navegadores, el ancho predeterminado del campo de texto es de 20 caracteres.


campo de contraseña

Los campos de contraseña por etiqueta <input type = "password"> para definir:

<form>
Password: <input type="password" name="pwd">
</form>

El navegador muestra los siguientes efectos:

Contraseña:

Nota: Los caracteres de campo de contraseña no se muestran en texto claro, pero con un asterisco o puntos en lugar.


botón de radio (Radio Buttons)

<Input type = "radio"> define por sí sola tabla las opciones del cuadro

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

El navegador muestra los siguientes efectos:

masculino
femenino

Las casillas de verificación (casillas de verificación)

<Tipo "casilla de verificación" de entrada => define una casilla de verificación. Los usuarios tienen que seleccionar una o varias opciones de varias opciones dadas.

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

El navegador muestra los siguientes efectos:

Tengo una bicicleta
Tengo un coche

botón (botón de envío) Presentar

<Input type = "submit"> define el botón de envío.

Cuando el usuario hace clic en el botón Aceptar, el contenido del formulario serán transferidos a otro archivo. atributo de acción de forma define el nombre de archivo del archivo de destino. Definido por el atributo de acción del archivo normalmente habrían recibido los datos de entrada relacionados con el tratamiento. :

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

El navegador muestra los siguientes efectos:

Nombre de usuario:

Si escribe algunas letras en el cuadro de texto anterior, a continuación, haga clic en el botón Aceptar, a continuación, los datos de entrada se transfiere a la página "html_form_action.php". Esta página muestra los resultados introducidos.


Inténtelo más ejemplos

Botón de opción (botones de radio)
Este ejemplo muestra cómo crear botones de radio en HTML.

Las casillas de verificación (casillas de verificación)
Este ejemplo muestra cómo crear una casilla de verificación en una página HTML. El usuario puede activar o desactivar la casilla de verificación.

lista desplegable sencillo
Este ejemplo muestra cómo crear un simple cuadro de lista desplegable en una página HTML. cuadro de lista desplegable es una lista opcional.

Pre-selección en la lista desplegable
Este ejemplo muestra cómo crear una lista desplegable simple con un valor preseleccionado.

Los campos de texto (Textarea)
Este ejemplo muestra cómo crear un campo de texto (un control de entrada de texto de varias líneas). El usuario puede escribir texto en un campo de texto. carácter modificable de palabras no está limitada.

botón crear
Este ejemplo muestra cómo crear un botón. Puede texto en el botón se puede personalizar.

Inténtelo instancia de formulario

Forma con la frontera
Este ejemplo demuestra cómo dibujar una caja alrededor de los datos con un título.

Campo de entrada y confirme el formulario con los botones
Este ejemplo muestra cómo agregar una página de formulario. Este formulario contiene dos campos de entrada y un botón de confirmación.

Formulario con casillas de verificación
Este formulario contiene dos casillas de verificación, y un botón de confirmación.

Formulario con botones de radio
Este formulario contiene dos cajas y un botón de confirmación.

Enviar correo electrónico desde un formulario
Este ejemplo muestra cómo enviar correo electrónico desde un formulario.


etiquetas de formulario HTML

Nuevo: HTML5 nueva etiqueta

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签,一般为输入标题
<fieldset> 定义了一组相关的表单元素,并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> New 指定一个预先定义的输入控件选项列表
<keygen> New 定义了表单的密钥对生成器字段
<output> New 定义一个计算结果