-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2-elementosCompuestos.html
130 lines (104 loc) · 4.61 KB
/
2-elementosCompuestos.html
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementos compuestos</title>
</head>
<body>
<h1>Explicación de elementos compuestos LaunchX</h1>
<!-- Labels / Etiquetas -->
<label for="Input1"> Ejemplo de Input de Texto</label>
<br>
<!-- Entradas / Inputs -->
<input type="text" id="Input1" name="Input1">
<br><br>
<hr>
<!-- Tipos de Inputs -->
<h2>Input De Texto</h2>
<label for="correo1">Input de Correo</label><br>
<input type="email" id="correo1" name="correo1"><br><br>
<label for="numero1">Input de número</label><br>
<input type="number" id="numero1" name="numero1"><br><br>
<label for="psw1">Input de Password</label><br>
<input type="password" id="psw1" name="psw1"><br><br>
<label for="tel1">Input de Teléfono</label><br>
<input type="tel" id="tel1" name="tel1" maxlength="10"><br><br>
<label for="url1">Input de URL</label><br>
<input type="url" id="url1" name="url1"><br><br>
<hr>
<h2>Input de selección multiple</h2><br>
<input type="checkbox" id="topping1" name="topping1" value="Cebolla">
<label for="topping1">Tacos con Cebolla</label><br>
<input type="checkbox" id="topping2" name="topping2" value="Cilantro">
<label for="topping2">Tacos con Cilantro</label><br>
<input type="checkbox" id="topping3" name="topping3" value="Salsa">
<label for="topping3">Tacos con Salsa</label><br><br>
<h2>Input de selección única</h2><br>
<input type="radio" id="roja" name="salsas" value="Roja">
<label for="roja">Roja</label><br>
<input type="radio" id="verde" name="salsas" value="Verde">
<label for="verde">Verde</label><br>
<input type="radio" id="guacamole" name="salsas" value="Guacamole">
<label for="guacamole">Guacamole</label><br><br>
<h2>Select</h2>
<label for="tacos">De que la orden</label>
<select id="tacos" name="tacos">
<option value="suadero">Suadero</option>
<option value="pastor">Pastor</option>
<option value="campechanos">Campechanos</option>
<option value="tripa">Tripa</option>
</select>
<h2>Select con Input</h2>
<label for="refresco">Elige tu refresco favorito</label><br>
<input list="refresco">
<datalist id="refresco">
<option value="Coca-Cola">
<option value="Manzana">
<option value="Naranja">
<option value="Mango">
<option value="Guayaba">
</datalist>
<br><br>
<hr>
<h2>Input de Fecha</h2><br>
<input type="date" id="fecha1" name="fecha1"><br>
<input type="datetime-local" id="fecha2" name="fecha2"><br>
<input type="week" id="fecha3" name="fecha3"><br>
<input type="time" id="fecha4" name="fecha4"><br>
<input type="month" id="fecha5" name="fecha5"><br><br>
<hr>
<h2>Input de Fecha</h2><br>
<input type="date" id="fecha1" name="fecha1"><br>
<input type="datetime-local" id="fecha2" name="fecha2"><br>
<input type="week" id="fecha3" name="fecha3"><br>
<input type="time" id="fecha4" name="fecha4"><br>
<input type="month" id="fecha5" name="fecha5"><br><br>
<hr>
<h2>Input de archivo</h2><br>
<input type="file" id="archivo1" name="archivo1" multiple><br><br>
<h2>Input de Color</h2><br>
<input type="color" id="color1" name="color1"><br><br>
<h2>Input de Rango</h2>
<label for="vol">Volumen (entre 0 y 50):</label><br>
<input type="range" id="vol" name="vol" min="0" max="50"><br>
<hr>
<h2>Input de botón</h2>
<input type="reset"><br>
<input type="submit"><br>
<input type="button" id="boton1" name="boton1" value="Botón 1" onclick="alert('Bienvenidos explorers');"><br><br>
<hr>
<!-- Formularios -->
<h2>Ejemplo de Formulario</h2>
<form action="/accion.js" id="form1" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
<label for="apellido">Apellido:</label>
<input type="text" id="apellido" name="apellido" form="form1">
<hr>
</body>
</html>