9. campos.html - Campos de texto

Salida

Ábrelo en otra pestaña.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport"
7 content="width=device-width">
8
9 <title>
10 Campos de texto - PWA con MD
11 </title>
12
13 <meta name="theme-color"
14 content="#fffbfe">
15 <link rel="icon" sizes="32x32"
16 href="favicon.ico">
17 <link rel="manifest"
18 href="site.webmanifest">
19
20 <link rel="stylesheet"
21 href="css/estilos.css">
22 <script
23 src="ungap/custom-elements.js">
24 </script>
25 <script type="module"
26 src="js/configura.js"></script>
27
28</head>
29
30<body>
31
32 <md-top-app-bar
33 headline="headline">
34
35 <h1>Texto</h1>
36
37 <button is="md-menu-button"
38 slot="navigation"
39 onclick="nav.abre()"></button>
40
41 </md-top-app-bar>
42
43 <h1 id="headline">Campos de texto</h1>
44
45 <main>
46
47
48 <!-- Usa class="float" cuando
49 quieras que la etiqueta esté
50 arriba todo el tiempo. -->
51 <p class="md-filled-text-field float">
52 <label for="saludo">Saludo</label>
53 <output id="saludo">Saludo</output>
54 </p>
55
56 <p class="md-filled-text-field">
57 <input id="nombre" required
58 placeholder="Nombre*">
59 <label for="nombre">Nombre*</label>
60 <small>*Requerido</small>
61 </p>
62
63 <p class="md-filled-text-field">
64 <input id="email" type="email"
65 placeholder="Email">
66 <label for="email" accesskey="M">
67 Email
68 </label>
69 </p>
70
71 <p class="md-filled-text-field float">
72 <input id="fecha" type="date"
73 placeholder="Fecha">
74 <label for="fecha">Fecha</label>
75 </p>
76
77 <p class="md-filled-text-field">
78 <textarea id="direccion"
79 placeholder="Dirección"
80 rows="3"></textarea>
81 <label for="direccion">
82 Dirección
83 </label>
84 </p>
85
86 </main>
87
88 <nav-drw id="nav"></nav-drw>
89
90</body>
91
92</html>

Solo para los más rudos

skip_previous skip_next