<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Registro - iDESWEB</title>
</head>
<body>
<header>
<h1>iDESWEB</h1>
</header>
<h2>Formulario de registro</h2>
<form method="post" action="documento.php">
<fieldset>
<legend>¿Quién eres?</legend>
<p>
<label for="idNombre">Nombre:</label><input type="text" id="idNombre" name="nombre"/>
<label for="idApellidos">Apellidos:</label><input type="text" id="idApellidos" name="apellidos"/>
</p>
<p>
<label for="idCorreo">Correo electrónico:</label><input type="text" id="idCorreo" name="apellidos"/>
</p>
<p>
Fecha de Nacimiento:
<select name="dia">
<option value="" selected="selected">Día</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="mes">
<option value="" selected="selected">Mes</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="anyo"><option selected="selected" value="">Año</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option></select>
</p>
</fieldset>
<fieldset>
<legend>¿De dónde eres?</legend>
<p>
<label for="idCiudad">Ciudad:</label><input type="text" id="idCiudad" name="ciudad"/>
</p>
<p>
<label for="idCode">Código postal:</label><input type="text" id="idCode" name="code"/>
</p>
<p>
País:
<select name="pais">
<option value="" selected="selected">País</option>
<option value="uzbekistan">Uzbekistan</option>
<option value="kazakistan">Kazakistan</option>
<option value="spain">Españistán</option>
</select>
</p>
</fieldset>
<fieldset>
<legend>¿Como quieres iniciar la sesión?</legend>
<p>
<label for="idUsuario">Nombre de usuario:</label><input type="text" id="idUsuario" name="usuario"/>
</p>
<p>
<label for="idPassword">Contraseña:</label><input type="password" id="idPassword" name="password"/>
</p>
<p>
<label for="idPassword2">Vuelve a escribir la contraseña:</label><input type="password" id="idPassword2" name="password2"/>
</p>
</fieldset>
<fieldset>
<legend>Condiciones de registro</legend>
<p>
Deseo recibir ofertas de iDESWEB
<input type="radio" name="oferta" id="idOfDia">Una vez al día
<input type="radio" name="oferta" id="idOfSemana">Una vez a la semana
<input type="radio" name="oferta" id="idOfMes">Una vez al mes
</p>
<p>
<input type="checkbox" name="acepto" id="idAcepto">Acepto el acuerdo de servicio, la declaración de privacidad y la declaración de uso de cookies.
</p>
</fieldset>
<p>
<input type="submit" value="Crear cuenta"/>
</p>
</form>
<footer>
</footer>
</body>
</html>
miércoles, 9 de octubre de 2013
martes, 8 de octubre de 2013
HTML: conceptos básicos: Una página web sencilla
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML: conceptos básicos: Una página web sencilla</title>
</head>
<body>
<header>
<h1>iDESWEB: Introducción al desarrollo web</h1>
</header>
<p>
Un curso nuevo de tipo MOOC, <b>totalmente gratuito</b> y disponible en la Web (<b>curso online</b>), con el que vas a aprender los conceptos básicos del desarrollo de aplicaciones web.</p>
<p>Aprende HTML, CSS, JavaScript, PHP... y los principios básicos del diseño, de la usabilidad y de la accesibilidad web.</p>
<p>La fecha de inicio de la tercera edición del curso es el 23/09/2013. El curso se desarrolla en la dirección <a href="http://ideswebcourse.appspot.com/">http://ideswebcourse.appspot.com/</a><p>
<iframe width="560" height="315" src="http://www.youtube.com/embed/TKfOc4EkiOE?rel=0" allowfullscreen></iframe>
<p><a href="http://ideswebcourse.appspot.com/">¡Apúntate y aprende!</a></p>
<h2>Temario</h2>
<p>En este curso aprenderás todo lo que necesitas saber para convertirte en un desarrollador web desde cero: HTML, CSS, JavaScript, DOM, DHTML, XAMPP, PHP, phpMyAdmin y MySQL.<p>
<p><a href="http://ideswebcourse.appspot.com/schedule">Temario »</a></p>
<h2>Calendario</h2>
<p>¿Cuándo empieza el curso? ¿Cuánto dura el curso?<p>
<p><a href="http://ideswebcourse.appspot.com/calendar">Calendario »</a></p>
<footer>
</footer>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML: conceptos básicos: Una página web sencilla</title>
</head>
<body>
<header>
<h1>iDESWEB: Introducción al desarrollo web</h1>
</header>
<p>
Un curso nuevo de tipo MOOC, <b>totalmente gratuito</b> y disponible en la Web (<b>curso online</b>), con el que vas a aprender los conceptos básicos del desarrollo de aplicaciones web.</p>
<p>Aprende HTML, CSS, JavaScript, PHP... y los principios básicos del diseño, de la usabilidad y de la accesibilidad web.</p>
<p>La fecha de inicio de la tercera edición del curso es el 23/09/2013. El curso se desarrolla en la dirección <a href="http://ideswebcourse.appspot.com/">http://ideswebcourse.appspot.com/</a><p>
<iframe width="560" height="315" src="http://www.youtube.com/embed/TKfOc4EkiOE?rel=0" allowfullscreen></iframe>
<p><a href="http://ideswebcourse.appspot.com/">¡Apúntate y aprende!</a></p>
<h2>Temario</h2>
<p>En este curso aprenderás todo lo que necesitas saber para convertirte en un desarrollador web desde cero: HTML, CSS, JavaScript, DOM, DHTML, XAMPP, PHP, phpMyAdmin y MySQL.<p>
<p><a href="http://ideswebcourse.appspot.com/schedule">Temario »</a></p>
<h2>Calendario</h2>
<p>¿Cuándo empieza el curso? ¿Cuánto dura el curso?<p>
<p><a href="http://ideswebcourse.appspot.com/calendar">Calendario »</a></p>
<footer>
</footer>
</body>
</html>
lunes, 7 de octubre de 2013
Wireframe
He decidido continuar el curso de septiembre de 2012, un año después.
Quedó pendiente la realización de un Wireframe para la realización de una aplicación tipo Flickr "de juguete".
Para su realización he utilizado la herramienta online que se llama gliffty. Se puede utilizar registrándose en https://www.gliffy.com/
Los Wireframes son solamente una de las opciones disponibles. Con esta aplicación web pueden realizarse varios tipos de diagramas de flujo, decoración, etc.
He realizado los wireframes de la página principal de la aplicación y la de búsqueda. Han quedado de la siguiente forma.
Página principal:
Página de búsqueda:
Quedó pendiente la realización de un Wireframe para la realización de una aplicación tipo Flickr "de juguete".
Para su realización he utilizado la herramienta online que se llama gliffty. Se puede utilizar registrándose en https://www.gliffy.com/
Los Wireframes son solamente una de las opciones disponibles. Con esta aplicación web pueden realizarse varios tipos de diagramas de flujo, decoración, etc.
He realizado los wireframes de la página principal de la aplicación y la de búsqueda. Han quedado de la siguiente forma.
Página principal:
Página de búsqueda:
jueves, 23 de mayo de 2013
HTML5: Nuevas funcionalidades en formularios parte 2.
En esta segunda parte vamos a ver los nuevos atributos de contenido que introduce HTML5. A parte de ver brevemento los Modernaizer y Polyfills.
autocomplete: puede utilizarse con otras etiquetas como el elemento form. Especifica si un formulario completo o un campo de éste debe de tener la opción de autocompletado.
Ejemplo:
<form autocomplete="on">
<input type="email" name="email" autocomplete="off">
Con valor on se autocompletará el formulario con valores que el usuario haya introducido en ese campo en ocasiones anteriores. En el caso de desactivarlo con la opción off se previene que un campo se complete automáticamente, por motivos de seguridad por ejemplo.
Es posible que en un mismo formulario existan campos que se autocompleten y que no lo hagan.
+21.04.43.png)
Este atributo funciona con los siguiente tipos (type) de input:
autofocus: no permite indicar en qué campo de entrada se coloca el foco cuando se carga la página. Es un atributo de tipo booleano, por lo que no debemos definit más de uno en cada formulario.
Ejemplo:
<input type="text" name="nombre" autofocus>
Este atributo es muy útil para los usuarios de teléfonos móviles. Es importante asegurarse que el campo seleccionado para que sea el campo que empezarán a usar la mayoría de los usuario.
min y max se utilizan para delimitar el rango de los valores numéricos. Permiten especificar un máximo y un mínimo para un campo de entrada. No permite introducir un valor por encima del máximo y por debajo del mínimo.
Ejemplo:
<input type="number" name="cantidad" min="2" max="8" />
<input type="range" name="rango" min="2" max="8" />
Este atributo funciona con los siguiente tipos (type) de input:
step: nos indica la pauta que nos dará los valores válidos en un formulario, en el caso anterior serían válidos los valores 2,4,6,8
Ejemplo:
<input type="range" name="rango" min="2" max="8" step="2" value="2"/>
Este atributo funciona con los siguiente tipos (type) de input:
pattern: el atributo pattern permite especificar las expresiones regulares que pueden introducirse en un campo.
Ejemplo:
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
+23.27.51.png)
El atributo title nos ayuda a comprender que información espera el campo.
Este atributo funciona con los siguiente tipos (type) de input:
placeholder: este atributo nos muestra el contenido que espera el campo.
Ejemplo:
<input type="text" name="nombre" placeholder="Fernando Haro" />
+23.38.15.png)
Esta pista se muestra en el campo cuando está vacío y desaparece cuando el campo recibe el foco.
Este atributo funciona con los siguiente tipos (type) de input:
required: es un atributo booleano que indica que el campo que debe de rellenarse antes de enviar el formulario. Es el campo obligatorio que aparece señalado con un asterisco o en rojo.
Ejemplo:
<input type="text" name="nombre" required />
Este atributo funciona con los siguiente tipos (type) de input:
Modernizr y Polyfills
Modernizr: es una librería de javascript que nos permite conocer la compatibilidad del navegador con las tecnologías HTML5 y CSS3. En el caso de encontrar elementos no compatibles ofrece medidas para solucionarlo.
Polyfills: librería de javascript que nos permiten cubrir los elementos no soportados por los navegadores.
Modernizr + polyfills ahorra trabajo a los desarrolladores.
Este post se ha creado a partir del video del curso idesweb.
- Nuevos atributos de contenido.
- autocomplete, autofocus, min, max, step, pattern, placeholder,required
- Modernizr y Polyfills
autocomplete: puede utilizarse con otras etiquetas como el elemento form. Especifica si un formulario completo o un campo de éste debe de tener la opción de autocompletado.
Ejemplo:
<form autocomplete="on">
<input type="email" name="email" autocomplete="off">
Con valor on se autocompletará el formulario con valores que el usuario haya introducido en ese campo en ocasiones anteriores. En el caso de desactivarlo con la opción off se previene que un campo se complete automáticamente, por motivos de seguridad por ejemplo.
Es posible que en un mismo formulario existan campos que se autocompleten y que no lo hagan.
+21.04.43.png)
Este atributo funciona con los siguiente tipos (type) de input:
- text
- search
- url
- tel
- date pickers
- password
- range
- color
autofocus: no permite indicar en qué campo de entrada se coloca el foco cuando se carga la página. Es un atributo de tipo booleano, por lo que no debemos definit más de uno en cada formulario.
Ejemplo:
<input type="text" name="nombre" autofocus>
Este atributo es muy útil para los usuarios de teléfonos móviles. Es importante asegurarse que el campo seleccionado para que sea el campo que empezarán a usar la mayoría de los usuario.
min y max se utilizan para delimitar el rango de los valores numéricos. Permiten especificar un máximo y un mínimo para un campo de entrada. No permite introducir un valor por encima del máximo y por debajo del mínimo.
Ejemplo:
<input type="number" name="cantidad" min="2" max="8" />
<input type="range" name="rango" min="2" max="8" />
Este atributo funciona con los siguiente tipos (type) de input:
- number
- range
- date
- datetime
- datetime-local
- month
- time
- week
step: nos indica la pauta que nos dará los valores válidos en un formulario, en el caso anterior serían válidos los valores 2,4,6,8
Ejemplo:
<input type="range" name="rango" min="2" max="8" step="2" value="2"/>
Este atributo funciona con los siguiente tipos (type) de input:
- number
- range
- date
- datetime
- datetime-local
- month
- time
- week
pattern: el atributo pattern permite especificar las expresiones regulares que pueden introducirse en un campo.
Ejemplo:
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
+23.27.51.png){kind=small}
El atributo title nos ayuda a comprender que información espera el campo.
Este atributo funciona con los siguiente tipos (type) de input:
- text
- search
- url
- tel
- password
placeholder: este atributo nos muestra el contenido que espera el campo.
Ejemplo:
<input type="text" name="nombre" placeholder="Fernando Haro" />
+23.38.15.png)
Esta pista se muestra en el campo cuando está vacío y desaparece cuando el campo recibe el foco.
Este atributo funciona con los siguiente tipos (type) de input:
- text
- search
- url
- tel
- password
required: es un atributo booleano que indica que el campo que debe de rellenarse antes de enviar el formulario. Es el campo obligatorio que aparece señalado con un asterisco o en rojo.
Ejemplo:
<input type="text" name="nombre" required />
Este atributo funciona con los siguiente tipos (type) de input:
- text
- search
- url
- tel
- password
- number
- checkbox
- radio
- file
Modernizr y Polyfills
Modernizr: es una librería de javascript que nos permite conocer la compatibilidad del navegador con las tecnologías HTML5 y CSS3. En el caso de encontrar elementos no compatibles ofrece medidas para solucionarlo.
Polyfills: librería de javascript que nos permiten cubrir los elementos no soportados por los navegadores.
Modernizr + polyfills ahorra trabajo a los desarrolladores.
Este post se ha creado a partir del video del curso idesweb.
miércoles, 22 de mayo de 2013
HTML5: Nuevas funcionalidades en formularios.
Una de las características más importantes del nuevo standar HTML5 son los nuevos elementos para el manejo de los formularios. Ya que nos permite gestionarlos de manera nativa, y por lo tanto podemos prescindir de javascript para realizar algunas validaciones del formulario por parte del cliente.
Los formularios no se enviarán si no son válidos y permitirá que el usuario vuelva a introducir los valores que no eran correctos.
Nuevas funcionalidades del atributo type en la etiqueta <input>:
url: <input type="url" name="url">
+23.33.05.png)
tel: <input type="tel" name="telf" pattern="(+[0-9]{2})[0-9]{2}" />
La variedad de teléfonos es muy amplia por lo que debemos especificar un patrón determinado. En teléfono móviles podría mostrarse la agenda para seleccionar un teléfono.
+23.43.51.png)
number: <input type="number" name="number" min="1" max="5" value="2" />
Se pueden asignar restricciones de números mínimos y máximos así como un valor predeterminado value
color: <input type="color" name="favcolor" value="#123456" />
En teoría sirve para seleccionar colores. value nos indica el color seleccionado por defecto. (no me ha funcionado en firefox y safari).
search: <input type="search" name="buscador" />
Aparece una cruz que permite borrar la palabra de búsqueda.
+23.56.52.png)
range: <input type="range" name="rango" min="1" max="10"/>
Consta de una barra deslizable que asigna valores en un intervalo definido.
+00.00.52.png)
datetime: <input type="datetime" name="fechahora" />
Permite seleccionar hora completa además de dia, mes y año. Incluye la zona horaria.
(no me ha funcionado en firefox y safari).
datetime-local: <input type="datetime-local" name="fechahora" />
Igual que el anterior pero sin incluir la zona horaria.
date: <input type="date" name="fecha" />
Permite seleccionar el día mes y año.
month: <input type="month" name="mes" />
Permite seleccionar un mes y un año específicos.
week: <input type="week" name="semana" />
Permite seleccionar una semana y un año específicos.
time: <input type="time" name="hora" />
Permite seleccionar horas y minutos.
Los navegadores que actualmente no soportan estos valores tomán estos tipos por defecto como: <input type="text" />
En el año 2014 el HTML5 será recomendado oficialmente por W3C a partir de 2014.
La información de este post se ha extraido del video del curso idesweb.
Los formularios no se enviarán si no son válidos y permitirá que el usuario vuelva a introducir los valores que no eran correctos.
Nuevas funcionalidades del atributo type en la etiqueta <input>:
- url, tel, email, number, color, search, range, datetime, datetime-local, date, month, week, time.
- vista de los tipos de input en los dispositivos móviles. Modificando la apariencia del interfaz táctil en función de los datos que tengamos que rellenar.
url: <input type="url" name="url">
+23.33.05.png)
tel: <input type="tel" name="telf" pattern="(+[0-9]{2})[0-9]{2}" />
La variedad de teléfonos es muy amplia por lo que debemos especificar un patrón determinado. En teléfono móviles podría mostrarse la agenda para seleccionar un teléfono.
+23.43.51.png)
Se pueden asignar restricciones de números mínimos y máximos así como un valor predeterminado value
color: <input type="color" name="favcolor" value="#123456" />
En teoría sirve para seleccionar colores. value nos indica el color seleccionado por defecto. (no me ha funcionado en firefox y safari).
search: <input type="search" name="buscador" />
Aparece una cruz que permite borrar la palabra de búsqueda.
+23.56.52.png)
range: <input type="range" name="rango" min="1" max="10"/>
Consta de una barra deslizable que asigna valores en un intervalo definido.
+00.00.52.png)
datetime: <input type="datetime" name="fechahora" />
Permite seleccionar hora completa además de dia, mes y año. Incluye la zona horaria.
(no me ha funcionado en firefox y safari).
datetime-local: <input type="datetime-local" name="fechahora" />
Igual que el anterior pero sin incluir la zona horaria.
date: <input type="date" name="fecha" />
Permite seleccionar el día mes y año.
month: <input type="month" name="mes" />
Permite seleccionar un mes y un año específicos.
week: <input type="week" name="semana" />
Permite seleccionar una semana y un año específicos.
time: <input type="time" name="hora" />
Permite seleccionar horas y minutos.
Los navegadores que actualmente no soportan estos valores tomán estos tipos por defecto como: <input type="text" />
En el año 2014 el HTML5 será recomendado oficialmente por W3C a partir de 2014.
La información de este post se ha extraido del video del curso idesweb.
martes, 21 de mayo de 2013
HTML conceptos avanzados: Formularios parte 2
Etiquetas de los elementos de un formulario
Las etiquetas de un formulario establecen una relación entre el control y el texto de la etiqueta.
La etiqueta <label></label> se asocian a los controles mediante el atributo for, que debe de coincidir con el valor del atributo id del control.
+23.24.32.png){kind=small}
+23.27.27.png){kind=small}
Agrupación de elementos
Los elementos de un formulario pueden agruparse por temas. El título de cada grupo de elementos se establece con la etiqueta <legend></legend>. La etiqueta <legend> debe definirse justo después de la etiqueta <fieldset>
+23.38.21.png){kind=small}
Elementos desplegables
La etiqueta <select></select> define una lista desplegable.
La etiqueta <option></option> define las opciones de una lista desplegable.
+23.49.08.png)
La etiqueta <optgroup></optgroup> nos permite agrupar la información dentro de un elemento desplegable.
+23.43.15.png)
La etiqueta <textarea></textarea> define input / control de entrada multilinea:
+23.54.59.png){kind=small}
Esta información se ha extraido de la página W3C Schools
lunes, 20 de mayo de 2013
HTML conceptos avanzados: Formularios parte 1
Segun la W3C un formulario es un documento que incluye:
Ejemplos:
<form></form> todos los datos que se quieran enviar deben encontrarse entre estas dos etiquetas. Esta etiqueta no tienen representación gráfica.
action
Es preciso distinguir entre dos tipos de peticiones que un cliente realiza a un servidor: GET y POST.
GET es el método que utilizamos habitualmente al navegar.
GET
accept-charset
name es un atributo común a todos los campos de un formulario. Espera una cadena de texto que especifica el nombre que recibirá el campo al ser enviado.
ejemplo: <input name="email" />
type define en que se convertirá el control, no es obligatorio pero sí muy recomendable.
<input type="text" /> Los imput del tipo text son los más comunes. se utilizan por defecto.
+22.10.43.png)
size
+22.12.39.png)
value
+22.06.59.png)
<input type="checkbox" /> Insertan casillas de verificación.
name
+22.43.22.png)
<input type="radio" /> Insertan casillas de verificación tipo radio. Se diferencia de las casillas de verificación en que sólo es posible seleccionar una de las opciones.
name
+22.45.52.png)
<input type="file" /> nos permiten adjuntar archivos al envío del formulario.
accept
Recordar que para el envío de archivos es necesaria la etiqueta:
<form enctype="multipart/form/data">
<input type="file" ... />
<form />
+22.49.32.png)
Tipos de botones:
<input type="submit | reset | button | image" />
submit: envía en formulario
reset: reinicia el formulario.
otro tipo de botones type="button" Para dotar de acciones a este tipo de botones utlizamos eventos de javascript.
+22.56.12.png)
Más etiquetas en el próximo post
Post extraido del video del curso idesweb
- Contenido normal
- Código
- Elementos especiales llamdos controles
- Rótulos para los controles
Ejemplos:
- Formularios de registro
- Acceso a sitios web
- Comentarios en redes sociales
<form></form> todos los datos que se quieran enviar deben encontrarse entre estas dos etiquetas. Esta etiqueta no tienen representación gráfica.
action
- El único atributo requerido para la etiqueta form.
- Espera una cadena de texto que especifique una URL o ruta a la acción de destino que procese los datos de la petición.
- Es posible utilizar una ruta absoluto o relativa.
- Indica la forma de enviar la información.
- Acepta los valores GET y POST.
- Método por defecto GET.
Métodos de envío.
Es preciso distinguir entre dos tipos de peticiones que un cliente realiza a un servidor: GET y POST.
GET es el método que utilizamos habitualmente al navegar.
GET
- Al utilizarlo los datos son visibles en la URL como parejas nombre=valor
- Limitada, el límite depende del navegador.
- Lo utlilizaremos cuando el resultado sea siempre el mismo o pueda ser guardado como en un formulario de búsqueda.
- Más seguro al enviar información sensible, como contraseñas, los datos no son visibles.
- No tiene límite en el envío.
- Posibilita la subida de ficheros al servidor.
accept-charset
- Espera una lista de juegos de caracteres separados por comas.
- Normalmente utiliza UTF-8 y en ocasiones ISO-8859-1 (Latin 1).
- No es muy común, casi nunca se utiliza.
- Especifica el tipo de codificación. por defecto "aplication/x-www-form-urlencoded" convierte todos lo espacios en símbolos suma.
- "multipart/form-data" se utiliza para subir ficheros mediante el formulario.
- "text/plain" sólo convierte los espacios en símbolos de sumar, pero los caracteres speciales no son convertidos.
- Entradas de tipo texto.
- Casillas de verificación.
- Casillas de opción (tipo radio)
- Archivos.
- Contraseñas
- Campos ocultos.
- Botones varios.
name es un atributo común a todos los campos de un formulario. Espera una cadena de texto que especifica el nombre que recibirá el campo al ser enviado.
ejemplo: <input name="email" />
type define en que se convertirá el control, no es obligatorio pero sí muy recomendable.
- "text", por defecto.
- "checkbox" indica que el campo será una casilla de verificación.
- "radio" casilla de opción (radio).
- "file" muestra un botón que abrirá una ventana para seleccionar un archivo. Dependiendo del navegador también muestra el nombre o la ruta al archivo,
- "password" genera un campo de texto enmascarado.
- "hidden" es un campo oculto. Para incluir información que no rellena el usuario de forma activa como el tiempo que tardado en rellenar el formulario.
- "button" mostrará un botón.
- "submit" dibuja un botón enviar.
- "image" utiliza una imagen con la misma función que un botón del tipo submit. Poco utilizado.
- "reset" utiliza un botón que borrará el formulario.
- Desabilita el campo para que no pueda ser utilizado. disabled = "disabled"
- Opera de forma parecida a disabled, pero aplicado a un input de tipo "text" sería posible seleccionar el texto y copiarlo.
- Ciertos campos necesitan de un atributo value para completar su funcionalidad.
Ejemplos con <input />
<input type="text" /> Los imput del tipo text son los más comunes. se utilizan por defecto.
- Pueden limitar el número de caracteres que se insertan. Útil para controlar el tamaño de datos que están limitados en las bases de datos.
- maxlegth es el atributo encargado de ello y el valor es un entero distinto de cero.
+22.10.43.png)
size
- Se le atribuye un número y es la anchura del campo de texto en caracteres.
- Está relacionado con el estilo por lo que se desaconseja el uso de este atributo.
+22.12.39.png)
value
- En input de tipo texto nos indican el valor de ese campo por defecto. Ya no se utiliza, habría que borrarlo para poder escribir en su lugar.
+22.06.59.png)
<input type="checkbox" /> Insertan casillas de verificación.
name
- Como las casillas se ordenan en grupo es importante que lleven el mismo nombre de modo que al recibirlas, el servicio de destino sepa que esos valores corresponden al mismo campo.
- Toma como valor el texto "checked" indica que la casilla aparece marcada por defecto.
- Indica al formulario que valor debe enviar al formulario si la casilla está activada. Si no se declara el formulario enviará inforamación imposible de procesar.
+22.43.22.png)
<input type="radio" /> Insertan casillas de verificación tipo radio. Se diferencia de las casillas de verificación en que sólo es posible seleccionar una de las opciones.
name
- Todos los elementos deben tener el mismo valor del atributo name.
- Toma como valor el texto "checked" indica que la casilla aparece marcada por defecto.
- Se enviará junto con el formulario.
+22.45.52.png)
<input type="file" /> nos permiten adjuntar archivos al envío del formulario.
accept
- En principo pensado para limitar el tipo de archivo que pueda ser subido, no está implentado por todos los navegadoresy siempre está activa la opción todos los archivos.
Recordar que para el envío de archivos es necesaria la etiqueta:
<form enctype="multipart/form/data">
<input type="file" ... />
<form />
+22.49.32.png)
Tipos de botones:
<input type="submit | reset | button | image" />
submit: envía en formulario
reset: reinicia el formulario.
otro tipo de botones type="button" Para dotar de acciones a este tipo de botones utlizamos eventos de javascript.
- En intrusivo mediante onclick="javascript:function();"
- No intrusivo, mediante el uso de librerías. <script src="myNonIntrusiveLibrary.js" /> <script>function();</script> no incrustados en el HTML.
- Especifica el texto que aparece en los botones.
+22.56.12.png)
CONSEJOS
- Si el formulario no está entre las etiquetas <form> </form> no será enviado, pero sí pueden existir campos fuera de ellas.
- <input type="value" /> Especificar siempre el atributo type.
- <input type="submit" /> Siempre necesitaremos un botón de envío del formulario.
- Separa el contenido de los estilos.
size, cols, rowpara eso está el CSS.
Más etiquetas en el próximo post
Post extraido del video del curso idesweb
Suscribirse a:
Entradas (Atom)