Creación de Formulario en Página HTML

CREACIÓN DE FORMULARIO EN HTML
Creación de formulario en página HTML

Para empezar a crear formularios en html utilizaremos la etiqueta <form> </form> y dentro de
ella todas las etiquetas que formaran parte del formulario que son las siguientes:
Vamos a crear un archivo llamado formulario.html para ir generando el formulario
Campo de texto normal
Para crear un campo de texto utilizaremos se siguiente instrucción:
<input name="nombre" type="text" size="30" maxlength="40" value=" " />
El atributo name será el nombre del campo, el atributo type tendrá el tipo elemento que
deseamos en este caso cuadro de texto, size se refiere al tamaño del campo, maxlength nos indica
el máximo de caracteres que podremos poner en el campo, con value podemos colocar un texto
desde el principio en el campo, pondremos en siguiente código para ir dando forma.
<html>
<head><title>Formulario</title></head>
<body>
<form>
<h2>Formulario para página web</h2>
Nombre: <input name="nombre" type="text" size="30" maxlength="40" value=" " />
</form>
</body>
</html>
El resultado será el siguiente:
FPV 1
Área de texto
El área de texto es un campo más grande, que el campo texto, esto nos permite insertar más
información como si fueran comentarios, la etiqueta es la siguiente:
<textarea name="comentario" cols="30" rows="4"></textarea>
Este campo tiene los atributos cols y rows con los cuales podremos hacer más grande el campo,
ahora agregaremos el código siguiente:
<br>
Comentario: <br>
<textarea name="comentario" cols="50" rows="6"></textarea>
Y se vera de la siguiente forma:
Si deseamos poner texto desde un inició, debemos hacerlo antes del cierre de la etiqueta.
Casilla de verificación
La casilla de verificación permite seleccionar varias opciones, siempre va acompañada de otras

más, para esto se utiliza la misma etiqueta input, pero en el atributo type, se debe colocar
Checbox, por ejemplo:
<input name="Casilla1" type="checkbox" value="1" /> Computadora <br>
Se vera de la siguiente forma
FPV 2
Si deseamos que una casilla aparezca seleccionada desde un inicio incluiremos el atributo
checked, veremos el siguiente ejemplo:
<h3>Equipo informático con el que cuentas en tu casa </h3><br>

<input name="Casilla1" type="checkbox" checked value="1" /> Computadora <br>
<input name="Casilla2" type="checkbox" value="2" /> Tableta <br>
<input name="Casilla3" type="checkbox" value="3" /> Laptop <br>
<input name="Casilla4" type="checkbox" value="4" /> Smartphone<br>
Grupo de opciones
A diferencia de la casilla de opciones el grupo de opciones solo permite seleccionar una opción de
la lista, se utiliza la misma etiqueta input, pero ahora en type utilizaremos la opción radio,
ejemplo:
<input name="nivel" type="radio" value="1" /> Preescolar <br>
Se vera de la siguiente forma
Para que solo permita seleccionar una opción de la lista, la propiedad el atributo name deberá ser
el mismo para todas las opciones de la lista, ejemplo:
<h3>Selecciona el nivel educativo en el que te encuentras </h3><br>

<input name="nivel" type="radio" value="1" /> Preescolar <br>
<input name="nivel" type="radio" value="2" /> Primaria <br>
<input name="nivel" type="radio" value="3" /> Secundaria <br>
<input name="nivel" type="radio" value="4" /> Medio Superior<br>
FPV 3
Menú desplegable
Este nos permite mostrara una lista de opciones, para poder seleccionar una de ellas, colocaremos
el siguiente código:
<h3> Veces que te conectas a internet en la semana</h3>

<select name="internet">
<option value="1" selected="selected">1 vez </option>
<option value="2">2veces </option>
<option value="3">3 veces </option>
<option value="4">Varias veces </option>
</select>
Usamos la etiqueta select para indicar que vamos a realizar el menú o lista desplegable, el atributo
name para el nombre de la lista, cada una de las opciones de la lista las iniciamos con la etiqueta
option, usamos el atributo selected="selected" para indicar que opción de la lista deseamos que
este seleccionada de inicio, el resultado será el siguiente:
Una vez dando clic sobre la lista se desplegaran las opciones y se vera de la siguiente manera
Botones
Veremos de momento 2 tipos de botones el primero nos permite restablecer la información del
formulario, en este caso eliminar todo lo que hayamos cambiado en el formulario, se utiliza de la
siguiente forma
FPV 4
<input name="borra" type="reset" value="Restablecer" />
Esto quedara de la siguiente forma:
El siguiente botón será el de enviar y será con el siguiente código
<input name="" type="submit" value="Google" />
En este caso para este botón tendremos que indicar en la etiqueta form el uso que se le
dará al botón por ejemplo aquí deseo que al dar clic sobre el este vaya a una página web,
por lo tanto la etiqueta form quedara de la siguiente forma:
<form action="https://www.google.com" method="get" >
Los dos botones se verán de la siguiente forma:
Si deseamos que el botón envié la información del formulario a un correo electrónico, el

código del botón seria de la siguiente manera
<input name="" type="submit" value="Enviar" />
La etiqueta form quedara de la siguiente forma
<form action="mailto:profepevi@gmail.com" method="post" enctype="text/plain">
En esta opción nos indicara que enviara el mensaje por correo electrónico
Los botones se verán de la siguiente forma:
si deseamos agregar un botón para imprimir el formulario agregamos la siguiente

instrucción:
<input type="button" name="imprimir" value="Imprimir" onclick="window.print();">
al dar clic en este botón nos enviara a la pantalla de impresión
Con esto el código que hemo ido creando mostrara la página de la siguiente forma:
FPV 5
FPV 6
Actividad 1
Realiza los cambios necesarios para que la página se vea de la siguiente forma:
Trabajando con JavaScript
Ahora vamos a crear un archivo que nos pida una contraseña para entrar a nuestro
formulario, este código va estar en javascript y vamos a colocarlo dentro de la etiqueta
<head>, en un bloc de notas nuevo al cual llamaremos Index.html copia y pega el
siguiente código:
<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function password() {
var testV = 1;
var pass1 = prompt('Por favor escriba la contraseña para acceder al contenido.
Copyright 2017-2017 FPV','Contraseña');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1 == "314159") {
alert('|-----**********Contraseña correcta*********-----|
Presione aceptar para continuar.... ');
window.open('formulario.html');
break;
}
testV+=1;
var pass1 =
prompt('La contraseña no es correcta.Intente de nuevo.','Contraseña');
}
if (pass1!="314159" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
</head>
<BODY>
<CENTER>
<FORM>
<input type="button" value="Entrar" onClick="password()">
</FORM>
</CENTER>
FPV 7
</body>
</html>
Una breve explicación
Estamos creando una función llamada password, con la instrucción:
function password()
Creamos una variable llamada testV (variable: un valor que durante la ejecución del
programa su valor puede cambiar) con la instrucción.
var testV = 1
A esta variable le asignamos un valor de 1
Creamos una segunda variable con el nombre pass1, esto es con la siguiente instrucción:
var pass1 = prompt('Por favor escriba la contraseña para acceder al contenido.

Copyright 2017-2017 FPV','Contraseña');
Con esta variable que acabamos de crear nos va permitir ingresar la contraseña y se vera
de la siguiente forma:
Lo que continua después de esto es un ciclo (significa que se va estar repitiendo una “n”
cantidad de veces), este ciclo se va estar repitiendo por lo menos 3 veces, esto significa
que nos va a preguntar por lo menos 3 veces por la contraseña, si nosotros colocamos una
contraseña incorrecta, va estar regresando a la misma página y nos dejara avanzar,
después de la tercera vez simplemente no volverá a preguntar y tendremos que volver a
ejecutar el script.
Si en alguna de las 3 oportunidades colocamos la contraseña correcta que en nuestro caso

es 31415, presentara un mensaje de contraseña correcta y nos mostrara la página del
formulario.
while (testV < 3) {

if (!pass1)
FPV 8
history.go(-1);
if (pass1 == "314159") {
alert('|-----**********Contraseña correcta*********-----|
Presione aceptar para continuar.... ');
window.open('formulario.html');
break;
}
testV+=1;
var pass1 =
prompt('La contraseña no es correcta.Intente de nuevo.','Contraseña');
}
if (pass1!="314159" & testV ==3)
history.go(-1);
return " ";
}
Después de esto dentro del cuerpo creamos un pequeño formulario que simplemente
contenga el botón que nos permita ejecutar e script.
<FORM>
<input type="button" value="Entrar" onClick="password()">
</FORM>
Con esta breve explicación ahora guardamos el archivo y probamos aparecerá de la

siguiente forma:
Damos clic en el botón y nos solicitara la contraseña
Solo nos preguntara la contraseña 3 veces, tendremos que volver a dar clic en el botón
entrar para que nos vuelva a preguntar, como ya te habrás dado cuenta la contraseña es :
FPV 9
314159, con esto te permitirá entrar al formulario, una vez que coloquemos la contraseña
correcta nos presentara el siguiente mensaje.
Al dar clic en aceptar nos presentara la página del formulario.
Actividad 2
Crea un formulario con los datos para la inscripción a una escuela.
1
FPV
0

Creación de Formulario en Página HTML

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Creación de Formulario en Página HTML

Загружено:

Авторское право:

Доступные форматы

CREACIÓN DE FORMULARIO EN HTML

Creación de formulario en página HTML

Vamos a crear un archivo llamado formulario.html para ir generando el formulario

Campo de texto normal

Para crear un campo de texto utilizaremos se siguiente instrucción:

<input name="nombre" type="text" size="30" maxlength="40" value=" " />

Nombre: <input name="nombre" type="text" size="30" maxlength="40" value=" " />

El resultado será el siguiente:

<textarea name="comentario" cols="30" rows="4"></textarea>

Y se vera de la siguiente forma:

La casilla de verificación permite seleccionar varias opciones, siempre va acompañada de otras

<input name="Casilla1" type="checkbox" value="1" /> Computadora <br>

Se vera de la siguiente forma

<h3>Equipo informático con el que cuentas en tu casa </h3><br>

El resultado será el siguiente:

<input name="nivel" type="radio" value="1" /> Preescolar <br>

Se vera de la siguiente forma

<h3>Selecciona el nivel educativo en el que te encuentras </h3><br>

El resultado será el siguiente:

<h3> Veces que te conectas a internet en la semana</h3>

<input name="borra" type="reset" value="Restablecer" />

Esto quedara de la siguiente forma:

El siguiente botón será el de enviar y será con el siguiente código

<input name="" type="submit" value="Google" />

<form action="https://www.google.com" method="get" >

Los dos botones se verán de la siguiente forma:

Si deseamos que el botón envié la información del formulario a un correo electrónico, el

<input name="" type="submit" value="Enviar" />

La etiqueta form quedara de la siguiente forma

<form action="mailto:profepevi@gmail.com" method="post" enctype="text/plain">

Los botones se verán de la siguiente forma:

si deseamos agregar un botón para imprimir el formulario agregamos la siguiente

<input type="button" name="imprimir" value="Imprimir" onclick="window.print();">

al dar clic en este botón nos enviara a la pantalla de impresión

Trabajando con JavaScript

Estamos creando una función llamada password, con la instrucción:

A esta variable le asignamos un valor de 1

var pass1 = prompt('Por favor escriba la contraseña para acceder al contenido.

Si en alguna de las 3 oportunidades colocamos la contraseña correcta que en nuestro caso

while (testV < 3) {

Con esta breve explicación ahora guardamos el archivo y probamos aparecerá de la

Damos clic en el botón y nos solicitara la contraseña

Al dar clic en aceptar nos presentara la página del formulario.

Crea un formulario con los datos para la inscripción a una escuela.

Вам также может понравиться