Código de HTML - Tipos de campos en un formulario de HTML5 y como mostrar sus valores con JavaScript

Versión 1
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 29 de Abril del 2014gráfica de visualizaciones de la versión: Versión 1
8.231 visualizaciones desde el 29 de Abril del 2014
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

NOTA; En algunos navegadores con versiones antiguas como Internet Explorer, puede que no funcionen correctamente.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        /**
         * Función que muestra los tipos de campos del formulario con sus
         * valores
         */
        function mostrar(){
            var resultado="";
            var form = document.getElementById("formulario");
            for (i=0;i<form.elements.length;i++)
            {
                // muestra el nombre del input
                resultado += "Nombre: <strong>" + form.elements[i].name + "</strong><br>";
 
                // muestra el tipo del input (text, button, password, email, ...)
                resultado += "Tipo: <strong>" + form.elements[i].type + "</strong><br>";
 
                // muestra el valor del input
                if(form.elements[i].type=="checkbox")
                {
                    // si es del tipo checkbox
                    resultado += "Valor: <strong>" + form.elements[i].checked + "</strong><hr>";
                }else{
                    resultado += "Valor: <strong>" + form.elements[i].value + "</strong><hr>";
                }
            }
 
            // mostramos la información en al apntalla
            document.getElementById("resultado").innerHTML=resultado;
        }
    </script>
    <style>
        div {
            height:30px;
        }
        div input, div select {
            position:absolute;left:300px;
        }
        input[type=radio],input[type=button],input[type=submit] {
            position:relative;left:auto;
        }
        textarea {
            width:300px;height:100px;
        }
    </style>
</head>
 
<body>
    <h1>Tipos de campos en un formulario de HTML5 y como mostrar sus valores</h1>
 
    <form id="formulario">
        <div>Texto<input type="text" name="text1" value="tipo texto"></div>
 
        <div>Color <input type="color" name="color1" value="#ff0000"></div>
 
        <div>Fecha: <input type="date" name="fecha1"></div>
 
        <div>Hora: <input type="time" name="hora1"></div>
 
        <div>Cumpleaños (date and time): <input type="datetime" name="datetime1"></div>
 
        <div>Cumpleaños (date and time): <input type="datetime-local" name="datetime-local1"></div>
 
        <div>E-mail: <input type="email" name="email1"></div>
 
        <div>Cumpleaños (month and year): <input type="month" name="month1"></div>
 
        <div>Semana: <input type="week" name="week1"></div>
 
        <div>Numeros: <input type="number" name="numeros1" min="1" max="5"></div>
 
        <div>Range <input type="range" name="range1" min="1" max="10"></div>
 
        <div>Search: <input type="search" name="search1"></div>
 
        <div>Telefono: <input type="tel" name="telefono1"></div>
 
        <div>Url: <input type="url" name="url1"></div>
 
        <div>Contraseña: <input type="password" name="password1"></div>
 
        <div>
            <input type="radio" name="tipo1" value="leche">Coche
            <input type="radio" name="tipo1" value="Agua" checked>Tren
            <input type="radio" name="tipo1" value="Vino">Avion
        </div>
 
        <div>Checkbox: <input name="check1" type="checkbox"></div>
 
        <div>
            Select:
            <select name="select1">
                <option selected>Selecciona</option>
                <option>Perro</option>
                <option>Gato</option>
                <option>Tortuga</option>
            </select>
        </div>
 
        <div style='height:120px'><textarea name="textarea1">textarea</textarea></div>
 
        <div><input type="button" value="mostrar resultados" name="boton1" onclick="mostrar()"></div>
        <div><input type="submit" value="enviar" name="submit1"></div>
    </form>
 
    <div id="resultado"></div>
</body>
</html>



Comentarios sobre la versión: Versión 1 (3)

Imágen de perfil
29 de Octubre del 2014
estrellaestrellaestrellaestrellaestrella
Realmente es muy bueno.
Responder
ll
7 de Enero del 2015
estrellaestrellaestrellaestrellaestrella
ll
Responder
Azkeel
5 de Noviembre del 2015
estrellaestrellaestrellaestrellaestrella
Me encantaría saber como lo implemento en los comentarios dejando las estrellas estáticas, sin que haya cambios de valoración por ningún otro usuario externo al comentario; le estaría muy agradecida!!
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2660