La Bitácora de Tigra: febrero 2017

lunes, 13 de febrero de 2017

HTML 5 con envio de formulario

EJEMPLO de una página web que contenga un formulario con los siguientes campos de información:

Nombre, con un control de tipo texto obligatorio y con autofoco.
Correo electrónico, con un control de tipo email obligatorio.
URL, con un control de tipo url que muestre la ayuda "Escribe la URL de tu página web personal".
Fecha, con un control de tipo date.
Tiempo, con un control de tipo time.
Fecha y hora, con un control de tipo datetime.
Mes, con un control de tipo month.
Semana, con un control de tipo week.
Número, con un control de tipo number que limite la entrada a un valor entre -10 y 10.
Teléfono, con un control de tipo tel.
Término de búsqueda, con un control de tipo search.
Color favorito, con un control de tipo color.
Un botón de envío.

Además, tienes que tener en cuenta los siguientes requisitos:

El título de la página debe ser Formulario de prueba de HTML5.
El método de envío del formulario debe ser GET.
El destino del envío del formulario debe ser "".

Nota: si al validar el código HTML de tu página web con el validador del W3C se muestran mensajes de advertencia como The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill. no te preocupes, el validador te está avisando de que lleves cuidado al usar una característica de HTML5 que no está admitida por todos los navegadores actuales.

Nota: por lo anterior, cuando realices esta actividad y compruebes cómo se visualiza tu página web en distintos navegadores es muy probable que obtengas diferentes resultados.

<title>Formulario de prueba de HTML5</title>

<form action="" method="get">
<p>Nombre:
<input type="text" name="name_control" autofocus="" required="">
</p>
<p>Correo electrónico:
<input type="email" name="email_control" required="">
</p>
<p>URL:
<input type="url" name="url_control" placeholder="Escribe la URL de tu página web personal">
</p>
<p>Fecha:
<input type="date" name="date_control">
</p>
<p>Tiempo:
<input type="time" name="time_control">
</p>
<p>Fecha y hora:
<input type="datetime" name="datetime_control">
</p>
<p>Mes:
<input type="month" name="month_control">
</p>
<p>Semana:
<input type="week" name="week_control">
</p>
<p>Número (min -10, max 10):
<input type="number" name="number_control" min="-10" max="10" value="0">
</p>
<p>Teléfono:
<input type="tel" name="tel_control">
</p>
<p>Término de búsqueda:
<input type="search" name="search_control">
</p>
<p>Color favorito:
<input type="color" name="color_control">
</p>
<p>
<input type="submit" value="Enviar">
</p>
</form>

FUENTE: IDESWEB

viernes, 10 de febrero de 2017

TABLA EN HTML

Ejemplo de tablas y sus atributos:

<title>Desempleo</title>
<style>
table,
tr,
th,
td {
border: 1px solid black;
}
</style>

<h1>El desempleo en España</h1>
<p>La siguiente tabla muestra la evolución del desempleo en España, comparado con la media de los 27 países de la Unión Europea, Grecia, que compite con España en ser el primero en esta vergonzosa competición y Estados Unidos y Japón, dos de las primeras economías mundiales.</p>
<table>
<tbody><tr>
<th>País</th>
<th>2000</th>
<th>2001</th>
<th>2002</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
<th>2007</th>
<th>2008</th>
<th>2009</th>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
</tr>
<tr>
<td>UE (27 países)</td>
<td>8.9</td>
<td>8.7</td>
<td>9</td>
<td>9.1</td>
<td>9.3</td>
<td>9</td>
<td>8.2</td>
<td>7.2</td>
<td>7</td>
<td>9</td>
<td>9.6</td>
<td>9.6</td>
<td>10.4</td>
<td>10.8</td>
</tr>
<tr>
<td><strong>España</strong></td>
<td><strong>11.9</strong></td>
<td><strong>10.6</strong></td>
<td><strong>11.5</strong></td>
<td><strong>11.5</strong></td>
<td><strong>11</strong></td>
<td><strong>9.2</strong></td>
<td><strong>8.5</strong></td>
<td><strong>8.2</strong></td>
<td><strong>11.3</strong></td>
<td><strong>17.9</strong></td>
<td><strong>19.9</strong></td>
<td><strong>21.4</strong></td>
<td><strong>24.8</strong></td>
<td><strong>26.1</strong></td>
</tr>
<tr>
<td>Grecia</td>
<td>11.2</td>
<td>10.7</td>
<td>10.3</td>
<td>9.7</td>
<td>10.6</td>
<td>10</td>
<td>9</td>
<td>8.4</td>
<td>7.8</td>
<td>9.6</td>
<td>12.7</td>
<td>17.9</td>
<td>24.5</td>
<td>27.5</td>
</tr>
<tr>
<td>Estados Unidos</td>
<td>4</td>
<td>4.8</td>
<td>5.8</td>
<td>6</td>
<td>5.5</td>
<td>5.1</td>
<td>4.6</td>
<td>4.6</td>
<td>5.8</td>
<td>9.3</td>
<td>9.6</td>
<td>8.9</td>
<td>8.1</td>
<td>7.4</td>
</tr>
<tr>
<td>Japón</td>
<td>4.7</td>
<td>5</td>
<td>5.4</td>
<td>5.3</td>
<td>4.7</td>
<td>4.4</td>
<td>4.1</td>
<td>3.9</td>
<td>4</td>
<td>5.1</td>
<td>5.1</td>
<td>4.6</td>
<td>4.3</td>
<td>4</td>
</tr>
</tbody></table>
<p>Fuente: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&language=en&pcode=tsdec450&plugin=1">Índice de desempleo anual</a>, Eurostat</p>

FUENTE: IDESWEB ACTIVATE GOOGLE

martes, 7 de febrero de 2017

FORMULARIOS EN HTML - PARTE II

En la actividad anterior "FORMULARIOS EN HTML - PARTE I "se te proponía realizar el siguiente formulario:

Crea una página web que contenga un formulario con los siguientes campos de información:

El nombre, con un control de tipo texto.
Los apellidos, con un control de tipo texto.
El sexo, con dos opciones excluyentes hombre o mujer.
El correo electrónico, con un control de tipo texto.
Una casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas".
Una casilla de verificación con el texto "Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos".
Un botón de envío.

Además, tienes que tener en cuenta los siguientes requisitos:

El título de la página debe ser Formulario de registro - Mi web.
El método de envío del formulario debe ser GET.
El destino del envío del formulario debe ser "".
La longitud máxima de entrada de datos de los controles para el nombre y los apellidos debe ser 50 caracteres.
La casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas" debe estar activada por defecto.

Al formulario anterior le tienes que añadir los siguientes campos de información:

Población, una lista desplegable con las opciones Alicante, Madrid, Sevilla y Valencia.
Descripción, un área de texto multilínea.

Además, tienes que asociar la etiqueta de cada control a su control para mejorar la usabilidad y la accesibilidad.

<title>Formulario de registro - Mi web</title>

<h1>Formulario de registro</h1>

<form action="" method="get">
<p>
<label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" maxlength="50">
</p>

<p>
<label for="apellidos">Apellidos:</label> <input type="text" name="apellidos" id="apellidos" maxlength="50">
</p>
<p>
Sexo: <input type="radio" name="sexo" id="sexo-h" value="h"> <label for="sexo-h">hombre</label> <input type="radio" name="sexo" id="sexo-m" value="m"> <label for="sexo-m">mujer</label>
</p>

<p>
<label for="correo">Correo:</label> <input type="text" name="correo" id="correo" maxlength="100">
</p>

<p>
<label for="poblacion">Población:</label>
<select name="poblacion" id="poblacion">
<option>Alicante</option>
<option>Madrid</option>
<option>Sevilla</option>
<option>Valencia</option>
</select>
</p>

<p><label for="descripcion">Descripción:</label>
<textarea name="descripcion" id="descripcion" rows="6" cols="60"></textarea>
</p>
<p>
<input type="checkbox" name="info" id="info" checked="checked"> <label for="info">Deseo recibir información sobre novedades y ofertas</label>
</p>
<p>
<input type="checkbox" name="condiciones" id="condiciones"> <label for="condiciones"> Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos</label>
</p>

<p>
<input type="submit" value="Enviar">
</p>
</form>

FUENTE: GUZMAN FERNANDEZ GARCIA

FORMULARIOS EN HTML

Crea una página web que contenga un formulario con los siguientes campos de información:

El nombre, con un control de tipo texto.
Los apellidos, con un control de tipo texto.
El sexo, con dos opciones excluyentes hombre o mujer.
El correo electrónico, con un control de tipo texto.
Una casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas".
Una casilla de verificación con el texto "Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos".
Un botón de envío.

Además, tienes que tener en cuenta los siguientes requisitos:

El título de la página debe ser Formulario de registro - Mi web.
El método de envío del formulario debe ser GET.
El destino del envío del formulario debe ser "".
La longitud máxima de entrada de datos de los controles para el nombre y los apellidos debe ser 50 caracteres.
La casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas" debe estar activada por defecto.

<title>Formulario de registro - Mi web</title>

<h1>Formulario de registro</h1>

<p>

Nombre: <input type="text" name="nombre" maxlength="50">

</p>

<p>

Apellidos: <input type="text" name="apellidos" maxlength="50">

</p>

<p>

Sexo: <input type="radio" name="sexo" value="h"> hombre <input type="radio" name="sexo" value="m"> mujer

</p>

<p>

Correo: <input type="text" name="correo" maxlength="100">

</p>

<p>

<input type="checkbox" name="info" checked="checked"> Deseo recibir información sobre novedades y ofertas

</p>

<p>

<input type="checkbox" name="condiciones"> Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos

</p>

<p>

</p>

</form>

FUENTE: GUZMAN FERNANDEZ GARCIA