Informática-María García

Formularios en HTML5:

http://www.anerbarrena.com/nuevos-atributos-html5-4813/

Tipos de input:

http://www.htmlcinco.com/nuevos-tipos-de-input-en-html5/

IMPORTANTE: https://www.w3schools.com/html/html_form_input_types.asp

Funciones Matemáticas de PHP:

http://php.net/manual/es/book.math.php

Tipo de entrada Número

La <input type = "número"> define una numérico campo de entrada.

También puede establecer restricciones en lo que se aceptan los números.

El ejemplo siguiente muestra un campo de entrada numérico, donde se puede introducir un valor de 1 a 5:

Ejemplo

<form>

  Quantity (between 1 and 5):

  <input type="number" name="quantity" min="1" max="5">

</form>

Propiedades del <textarea>:

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

rows:

El número de líneas visibles en el control. Largo de la caja.

cols:

La anchura visible del control de texto, en caracteres de anchura media. Si está definido debe ser positivo. Si no, por defecto, el valor es 20 (HTML 5).

https://developer.mozilla.org/es/docs/Web/HTML/Elemento/textarea

placeholder: declararemos el atributo placeholder con una pista acerca del contenido que se espera sea ingresado en el control, el cual será mostrado dentro de la caja de texto cuando ésta esté vacía.

Sintaxis de tel input HTML5

XHTML

1

<input type="tel" name="telefono">

Como veis es muy fácil insertar el nuevo input tel en el formulario un formulario.

Ejemplo de uso del atributo pattern en el tel input HTML5

Os pongo un segundo ejemplo usando el atributo pattern, esta mejora consiste en que se metan obligatoriamente los 9 dígitos de los números de teléfono que se usan en España.

XHTML

1

2

3

4

<form name="ejemplo1" action="15-html5-tel-input-demo2.php" method="POST">

     Introduce tu TELEFONO con los 9 dígitos: <input type="tel" name="telefono" pattern="[0-9]{9}">

     <input type="submit" value="Enviar">

</form>

En el código superior podemos ver como en el atributo pattern hemos metido una expresión regular en la que condicionamos la entrada de 9 números del 0 al 9.

Siempre se ha de cumplir esa condición, en caso contrario nos hará una validacón automática como la que pongo en la siguiente imagen.

Ejemplo de uso del atributo pattern para letras:

1

2

<input type="text" name="pueblo" pattern="[A-Za-z]{4-16}">

<!-- El usuario solo podrá meter una palabra de 4 a 16 caracteres entre la con las letras de A-Z y a-z -->

Atributos válidos en tel input HTML5

name: Nombre del input (name=”nombre del input”).
disabled: Atributo que determina si está desactivado el input para la introducción de datos (disable=”disabled”), por defecto activado.
type: tipo de input, en este caso es ‘tel’
form: Con este atributo se asocia el id del form al que pertenece el input (form=”id del form”).
autocomplete: Con autocomplete activado el input se autorrellenará con contenidos anteriormente enviados por él mismo (autocomplete=”off”, autocomplete=”on”).
autofocus: Este atributo hace que el cursor se situe en en input (autofocus=”autofocus”).
list: Asocia mediante id una lista de valores predefinidos (list=”nombre lista”).
maxlength: Longitud máxima en caracteres del número introducido.

maxlength="7"

readonly: Con el valor activado el input no podrá variar de valor, no se podrá editar (readonly=”readonly”).

required: Determina si el input tiene que ser rellenado obligatoriamente (required=”required”).

size: Anchura del input en el form.

pattern: Expresión regular que a de cumplir el número de teléfono.

placeholder: Permite al usuario ver una leyenda en el input de entrada de datos. Cuando el usuario clicke sobre el input esta leyenda desaparecerá (placeholder=”leyenda, texto explicativo”).

value: Valor por defecto del input.

novalidate: Hace que el input no se valide al enviarse el formulario.

http://www.anerbarrena.com/html5-tel-input-1802/

ucwords (Convierte la primera letra de cada palabra a Mayúsculas en php)

$texto = ucwords($observacion);

strtouppper, strtolower, ucwords y la codificación

$cadenaOriginal = "En EsPaÑA hAy MuchOs HIpÓcritas y PolíTicOS CoRruPtos";

echo ("CADENA ORIGINAL: ".$cadenaOriginal."<br>");

// Arroja >> CADENA ORIGINAL: En EsPaÑA hAy MuchOs HIpÓcritas y PolíTicOS CoRruPtos

echo ("CADENA MAYÚSCULAS: ".strtoupper($cadenaOriginal)."<br>");

// Arroja >> EN ESPAÑA HAY MUCHOS HIPÓCRITAS Y POLíTICOS CORRUPTOS

echo ("CADENA MINÚSCULAS: ".strtolower($cadenaOriginal)."<br>");

// Arroja >> CADENA ORIGINAL: en espa�a hay muchos hip�critas y pol�ticos corruptos

echo ("CADENA CAPITALIZADA: ".ucwords(strtolower($cadenaOriginal))."<br>");

// Arroja >> CADENA ORIGINAL: En Espa�a Hay Muchos Hip�critas Y Pol�ticos Corruptos

http://q-interactiva.com/2008/11/strtouppper-strtolower-ucwords-y-la-codificacion/

Cómo colocar la estructura de un echo para que nos valga una variable:

echo '<b><font color="red" size="4">'.$texto.'</font></b>';

echo '<a href="'.$observacion.'" target="_blank"><font color="blue" size="4"> IR AL SITIO WEB</a>';