En JavaScript tenemos el método prompt(), que tiene tres variantes según la cantidad de parámetros:
Sin parámetros
Un parámetro
Dos parámetros
prompt();
prompt('Ingrese su edad');
prompt('Ingrese su edad','18');
Cuando no tiene parámetros muestra una ventana flotante que pide ingresar un dato.
Cuando tiene un parámetro muestra la ventana flotante con un texto, que es el que colocamos como argumentos.
Cuando tiene dos parámetros muestra la ventana flotante, el título o texto sobre la caja de texto y un valor por defecto en la caja de texto.
CONFIRM
En JavaScript tenemos el método confirm(), que permite al usuario elegir una opción entre Ok (aceptar) o Cancel (Cancelar), especialmente útil para evitar que acciones no deseadas se ejecuten al dar un clic por error o mostrar un mensaje previo a la confirmación de una acción. Por ejemplo:
El siguiente código utiliza la función Confirm cuando se presiona el botón.
<script>
function test(){
let eleccion = confirm("Elige una opción\n\nSabiamente");
if (eleccion == true) {
alert("Elegiste Aceptar");
} else {
alert("Elegiste Cancelar");
}
}
</script>
<button onclick="test();">Botón confirm</button>
Notas:
para insertar saltos de línea usamos \n dentro de la cadena de texto, para un espacio de tabulación \t
El valor que la función confirm devuelve es un valor lógico (verdadero o falso)
Métodos de salida
ALERT
La función por excelencia para mostrar un mensaje es Alert(); que nos permite desplegar una ventana flotante con el mensaje que deseemos, este mensaje puede ser cualquier tipo de variable, pero se mostrará convertido a texto. Ejemplo:
<button onclick="alert('Yo soy un alert');">Botón alert</button>
Los formularios envían datos a través de los métodos POST y GET, por ello es necesario que los diversos elementos que contendrán los datos que serán enviados se encuentren dentro de las etiquetas FORM
Estructura básica
Todo formulario debe encontrarse entre las etiquetas Form, luego los diversos elementos pueden encontrarse como mejor deseemos, pero lo recomendable es seguir una serie de estándares como utilizar los Fieldset como contenedores de los diversos elementos que pueden ser etiquetas, cajas de texto, botones, etc.
Ejemplo en código:
<form>
<fieldset>
Ingrese su usuario:<br/>
<input type="text" /><br/>
Ingrese su clave:<br/>
<input type="password" /><br/><br/>
<input type="submit" value="Enviar"/>
</fieldset>
</form>
Resultado visual:
Títulos, textos, cajas de texto y botones básicos
Podemos colocar un título para cada Fieldset mediante la etiqueta Legend, textos de guía con la etiqueta Label y diversas cajas de texto con la etiqueta Input. Además, botones que pueden ser creados con la misma etiqueta Input o Button.
Ejemplo en código:
<form>
<fieldset>
<legend>Titulo</legend>
<label>Ingrese su usuario:</label><br/>
<input type="text" /><br/>
<label>Ingrese su clave:</label><br/>
<input type="password" /><br/><br/>
<button>ENVIAR</button>
</fieldset>
</form>
Resultado visual:
Diversos tipos de campos para ingresar información
Tenemos los diferentes tipos con sus respectivas propiedades
Texto normal
Ejemplo en código:
<form>
<fieldset>
<legend>INPUT</legend>
Texto normal: <br/>
<input type="text"/><br/>
Texto con valor: <br/>
<input type="text" value="valor"/><br/>
Texto solo de lectura: <br/>
<input type="text" value="no puedes cambiarme" readonly/><br/>
Texto con placeholder: <br/>
<input type="text" placeholder="Ingresa tu nombre"/><br/>
Texto requerido u obligatorio: <br/>
<input type="text" placeholder="Dale clic a enviar" required/><br/>
Texto multilíneas: <br/><textarea></textarea><br/>
<button type="submit">ENVIAR</button>
</fieldset>
</form>
Conocidas como los Combobox en lenguajes de programación como Visual, Java, etc. permiten desplegar una serie de valores y elegir uno de ellos, la ventaja de este frente al RadioButton es que se puede desplegar mucha más información sin usar demasiado espacio en la página.
Ejemplo en código:
<form>
<fieldset>
<legend>Seleccionar una ingeniería</legend>
<select><option>Ingeniería ambiental</option>
<option>Ingeniería eléctrica</option>
<option>Ingeniería informática</option>
<option>Ingeniería de minas</option>
<option>Ingeniería química</option>
<option selected="selected">Ingeniería de software</option>
</select>
</fieldset>
</form>
Esta es una guía básica y rápida del universo de etiquetas de HTML5, pero que es un buen punto de partida para empezar a diseñar nuestras páginas con diversos elementos.
Etiqueta <a>
Define el inicio y cierre de un texto que contiene un enlace a un hipervínculo, su propiedad principal es HREF que le permite definir la ruta a la que apunta. Especialmente útil para que los menús, botones u otros puedan ir a otra dirección web o a un bloque con determinado identificador
Define el inicio y cierre de un párrafo de texto. Antes de HTML5 tenían una propiedad llamada ALIGN que permitía definir la alineación del parrafo, en HTML5 ya no es soportada esa propiedad, reemplazándose por el uso de CSS
Ejemplos:
<p>Yo soy un párrafo...</p>
Yo soy un párrafo:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Etiquetas <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Permiten definir encabezados en las páginas web, donde el tamaño y algunas características como el uso de negrita son sus principales propiedades, los h1 son más grandes que los h2 y así sucesivamente.
Ejemplos:
<h1>Yo soy un h1</h1>
Yo soy un h1
<h3>Yo soy un h3</h3>
Yo soy un h3
<h5>Yo soy un h5</h5>
Yo soy un h5
Etiqueta <span>
Define el inicio y cierre de un texto que se puede encontrar dentro de otro texto, permite hacer diversas cosas como modificar características de parte de un texto de un párrafo
Ejemplos:
<p>Texto <span style="color:blue;">span</span> común y corriente</p>
Texto span común y corriente
Etiqueta <pre>
Define el inicio y cierre de un texto que mantiene saltos de línea y espacios, en las otras etiquetas de texto, solo se puede dar un salto de línea con la etiqueta </br>
Ejemplos:
<pre>Yo soy un
texto que mantiene
los saltos de línea
y espacios</pre>
Yo soy un
texto que mantiene
los saltos de línea
y espacios
Etiqueta <code>
Define el inicio y cierre de un texto que contiene código de computadora, no es una etiqueta obsoleta, pero se puede obtener efectos visualmente más atractivos utilizando CSS
Ejemplos:
<code>Yo soy un pedazo de código</code>
Yo soy un pedazo de código
Etiqueta <div>
Define el inicio y cierre de una sección del documento HTML, extremadamente usado como contenedor de otras etiquetas y de mucho apoyo para diseño de páginas con Responsive Desing una vez que se emplea propiedades de CSS sobre estos contenedores
Ejemplos:
<div style="width:200px; color: green; background-color:#dedede;">
Yo soy un contenedor DIV
</div>
Yo soy un contenedor DIV
Etiqueta <iframe>
Define el inicio y cierre de un bloque que contiene un elemento HTML como vídeo embebido, otra página web, plugins de redes sociales, etc. Mediante el uso de su propiedad SRC
Permite crear una tabla, pero debe ir acompañada de sus diversos elementos, tendresmos un encabezado de tabla, un cuerpo de la tabla y un pie de tabla: thead, tbody y tfoot, estas secciones de la tabla contienen filas y columnas, en HTML se declara primero las filas que son los tr, luego las columnas que los componen que pueden ser td o th
Son las etiqeutas para generar formularios que envían información mediante el método POST o GET, tenemos la etiqueta del formulario en sí : FORM, luego sus campos o FIELDSET y dentro de ellos colocamos los elementos como cajas de texto o botones.
Permiten realizar gráficos en el documento HTML, sin recurrir a imágenes externas. HTML5 provee de dos formas de realizar estos gráficos, la primera es mediante la etiqueta CANVAS que es un contenedor rectangular y donde se dibujan las formas aplicando código en JavaScript, y la segunda mediante SVG que actúa como un contenedor rectangular dentro del cual se colocan las diversas formas que uno desea
Estas etiquetas permiten crear listados ordenados, su potencial se ve incrementado al construir menús con CSS y la etiqueta <a>. Mientras UL hace listado sin orden, OL realiza listados ordenados.
Define contenedores similares al DIV con la diferencia que estos tienen ya usos estandarizado en el diseño HTML en general. Por ejemplo, el HEADER se usa para colocar el logo, y menú, el FOOTER para el pie de página donde se pone mapa del sitio u otros.
Etiqueta <script>
Define el inicio y cierre de un bloque de código JavaScript que puede ejecutar diversas operaciones.
