Problema con HTML de principiante

MaSoBa #1 Ene '14 Penitente

Llevo una semana aprendiendo HTML y me he quedado atascado en un ejercicio. Debo hacer un formulario de registro y me he atascado en la fecha de nacimiento. La idea es hacer una lista desplegable para día, mes y año. Pero no se como poner tantas opciones. Es decir días desde 1-31. Meses 1-12. Y años 2014-1900.

Supongo que hay alguna forma para no escribir cada casilla de una opción. Pero con lo dado hasta ahora en el curso que estoy siguiendo no se explica. Y por Internet hay soluciones pero que parecen que implementan Javascript, cosa que todavía no he visto. Así que solo tiene que ser con HTML.

Estoy usando HTML 5.

Este es mi código por ahora.

<h2>Formulario de registro</h2>
		<form>
        	<fieldset>
        	<legend>¿Quién eres?</legend>
        	Nombre<input type="text" name="nombre"> Apellidos<input type="text" name="apellidos"><br/> 
            <br/>
            Correo electrónico<input type="text" name="correo"><br/>
            <br/>
            Fecha de nacimiento<select name="fecha de nacimiento">
            <option selected value="0">Día</option>
            <option value="Día">1</option>
            <option value="Día">2</option>
            <option value="Día">3</option>
        	</fieldset>
        </form>

naete #2 Ene '14

Si sólo puedes usar HTML te toca escribir tantos

<option></option>

como días/meses/años quieras poner.

2 respuestas

MaSoBa #3 Ene '14 Penitente

#2 Entonces va a ser que se queda así hasta que aprenda por otros medio como se hace. Muchas gracias por tu respuesta! Me estaba volviendo loco y es solo el principio.

1 respuesta

naete #4 Ene '14

#3 De nada hombre, a menos que exista algo nuevo que yo no conozca.. no hay más remedio. Cuando manejes javascript verás que puedes hacer cualquier cosa

S

Sarwaz #5 Ene '14

Si estas usando html5 existe un atributo para usar fechas.

<input type="date">

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date

2 1 respuesta

MaSoBa #6 Ene '14 Penitente

#5 Hostias! Que cosa tan sencilla y útil que es! Muchas gracias

1 respuesta

naete #7 Ene '14

#6 Ojo! que así estás ignorando algunos navegadores! (Firefox e IE por ejemplo)

VeL3FoR #8 Ene '14

Usa PHP, aunque si es solo con html, tienes que hacer lo que ha dicho #2.

<h2>Formulario de registro</h2>
                <form>
                <fieldset>
                <legend>¿Quién eres?</legend>
                Nombre<input type="text" name="nombre"> Apellidos<input type="text" name="apellidos"><br/> 
            <br/>
            Correo electrónico<input type="text" name="correo"><br/>
            <br/>
            Fecha de nacimiento<select name="fecha de nacimiento">
            <?php 
                for ($i = 0; $i < 31; $i++) {
                    if ($i == 0) {
                         echo "<option selected value='".$i."'>".$i."</option>";
                    } else {
                         echo "<option value='".$i."'>".$i."</option>";
                     }
               }
            ?>
                </select>
            </fieldset>
        </form>

1 respuesta

gonya707 #9 Ene '14 Moderador

#8 Llevo una semana aprendiendo HTML

si le das ahora la solucion en php el pobre va a flipar

1 1 respuesta

MaSoBa #10 Ene '14 Penitente

#9 Un poco la verdad. Pero así voy viendo lo que me espera y diferentes formas de solucionarlo. Poco a poco y paso a paso.

liebgott #11 Ene '14

Vale, acabo de leer lo de HTML

Prueba cn Emmet, para HTML tedioso va de puta madre. Otra posibilidad es cn Jade y compilar el HTML, tecnicamente no estas usando JS en la pagina

DaRk-eXe #12 Ene '14

esta aprendiendo HTML y le quereis meter php y jquery por medio... menudo overkill al pobre
#13, #12 editó

1 respuesta

eXtreM3 #13 Ene '14

#12 dónde ves el jquery?

2 respuestas

liebgott #14 Ene '14

#13

Creo que lo dice xq en una respuesta he puesto que usara jQuery UI. Posteriormente me he dado cuenta de q NO queria usar JS.

1 respuesta

DaRk-eXe #15 Ene '14

#13 #14 efectivamente, lo decía por lo que habías puesto pero como has editado como un pequeño ninja.. me has dejado como un loco

1 respuesta

eXtreM3 #16 Ene '14

#15 loco.

raid #17 Ene '14

#1 Con HTML no te queda otra que pateartelo todo. Otra cosa es que pudieras usar javascript por ejemplo, o la solución que te han dado en php.

Por cierto: los options creo que no están bien configurados.

           <select name="fecha de nacimiento">
            <option selected value="0">Día</option>
<!-- si lo haces así, tanto si seleccionas 1, 2 o 3. 
el valor del "fecha de nacimiento" = "Día" -->
            <option value="Día">1</option>
            <option value="Día">2</option>
            <option value="Día">3</option>
<!-- Tendría que ser así -->
            <option value="1">día 1</option>
            <option value="2">día 2</option>
            <option value="3">día 3</option>
<!-- te falta cerrar el select -->
            </select>

1 respuesta

liebgott #18 Ene '14

Sigo apostando por Emmet xD

select>option[value=dia$]{dia $}*31 + TABULADOR = win

Cualquier editor/IDE moderner deberia soportarlo

MaSoBa #19 Ene '14 Penitente

#17 Gracias por la corrección! El select lo tenía cerrado pero no lo copié. La verdad es que no tengo todo el tiempo que me gustaría para darle más duro al HTML. Pero así da gusto, va por todos por vuestra ayuda.

1 respuesta

raid #20 Ene '14

#19 Otra recomendación:
Cuando pongas valores a las variables que se envian en en formulario, intenta evitar espacios. Se trata de una buena costumbre, y evita posibles problemas.

<select name="fecha de nacimiento">
<!-- mejor -->
<select name="fnacim">

Mira: haz la siguiente prueba

fichero: form.html
<form name="frmdatos" action="form.html" method="get">
Nombre <input type="text" name="nombre de la persona"><br>
DNI <input type="text" name="direc"><br>
<input type="submit" value="enviar">

En el ejempo, el formulario envia los datos al mismo documento html por el método get (o sea, a través de parámetros de linea de navegación)

Ejecuta el formulario y mira después de introducir los datos cómo se visualizan las variables. Verás que donde tienes espacios, se han puesto simbolos de suma.

JuAn4k4 #21 Ene '14

Ya que estamos:

Puedes usar labels y placeholder (no funciona en IE8 para abajo).

<label for="input_nombre">Nombre</label>
<input id="input_nombre" type="text" name="nombre" placeholder="Nombre" value="" />

<input id="input_conditions" type="checkbox" name="conditions"  value="" />
<label for="input_conditions"> Acepto las condiciones y términos de uso</label>

El label significa que al clicar sobre el texto, hace focus en el input automáticamente, bastante útil en las checkbox / radio para no tener que apuntar directamente dentro de la casilla.

Además mejora la usabilidad para los readers para ciegos y demás.

1 respuesta

MaSoBa #22 Ene '14 Penitente

#21 Ambas las implemente ayer, es mucho más cómodo para el usuario de esa forma. Gracias!

Problema con HTML de principiante

Usuarios habituales

Tags