viernes, 24 de abril de 2015

Cómo crear un formulario sencillo y dinámico

Os vamos a poner el código de cómo hacer un formulario,el ejemplo que hemos puesto es como si fuese un formulario para un hotel, vosotros lo podeis poner a vuestro gusto y modificar el código como queráis y añadir o eliminar nuevas etiquetas.
Si queréis una pequeña ayuda https://librosweb.es/libro/css/capitulo_11.html


<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Formulario reserva</title>
        <link rel="stylesheet" type="text/css" href="form_reserva.css">
    </head>
    <body>      
        <header>
            <h1 style="font-family:arial; text-align:center; text-shadow: 3px 3px 2px #383838;">FORMULARIO /Root</h1>
        </header>
        <div id="formulario">
            <section>
                <form name="contacform" id="contacform" method="get">
                    <fieldset>
                        <legend>Datos Personales</legend>
                        <label class="etiquetas">Nombre:</label>
                        <input type="text" name="nombre" id="nombre" maxlength="20" placeholder="Su nombre" required="required" autofocus size="21" class="textbox"></br>
                        </br>
                        <label class="etiquetas">Apellidos:</label>
                        <input type="text" name="apellidos" id="apellidos" maxlength="40" placeholder="Sus apellidos" required="required" size="40" class="textbox"></br>
                        </br>
                        <label class="etiquetas">Teléfono:</label>
                        <input type="tel" name="telefono" id="telefono" maxlength="9"  placeholder="Su teléfono" required="required"size="9" class="textbox"></br>
                        </br>
                        <label class="etiquetas">Email:</label>
                        <input type="email" name="email" id="email" maxlength="30"  placeholder="su@correo.com" required="required"size="20" class="textbox"></br>
                        </br>

                        <label class="etiquetas">Nº Noches:</label>
                        <input type="number" name="n_noches" id="n_noches" maxlength="3" size="4" min="0" max="365" class="textbox"></br>
                        </br>
                        <!--label class="etiquetas">D.N.I.:</label>
                        <input type="text" name="dni" id="dni" maxlength="9"  placeholder="Su D.N.I." required="required"size="9" class="textbox">
                        <label class="etiquetas">Fecha de Nacimiento:</label>
                        <input type="date" name="f_nacimineto" id="f_nacimiento" maxlength="10" size="10" class="textbox">
                        <label class="etiquetas">Dirección:</label>
                        <input type="text" name="direccion" id="direccion" maxlength="100"  placeholder="Su dirección" required="required"size="50" class="textbox"-->                       
                        <label class="etiquetas">Fecha de Entrada:</label>
                        <select name="dia">
                                <option selected value="0">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 selected value="0">mes</option>
                                <option value="1">Enero</option>
                                <option value="2">Febrero</option>
                                <option value="3">Marzo</option>
                                <option value="4">Abril</option>
                                <option value="5">Mayo</option>
                                <option value="6">Junio</option>
                                <option value="7">Julio</option>
                                <option value="8">Agosto</option>
                                <option value="9">Septiembre</option>
                                <option value="10">Octubre</option>
                                <option value="11">Noviembre</option>
                                <option value="12">Diciembre</option>
                        </select></br>
                        </br>
                        <div id="r1" class="radio">
                        <label class="etiquetas">Tipo de Habitación:</label></br>
                            </br>
                            <input type="radio" name="tipo_habitacion" id="simple">
                            <label>Simple</label></br>
                            <input type="radio" name="tipo_habitacion" id="doble">
                            <label>Doble</label></br>
                            <input type="radio" name="tipo_habitacion" id="matrimonio">
                            <label>Matrimonio</label>
                        </div>
                        <div id="r2" class="radio">
                            <label class="etiquetas">Incluir:</label></br>
                            </br>
                            <input type="checkbox" name="desayuno" id="desyano">
                            <label>Desayuno</label></br>
                            <input type="checkbox" name="comida" id="comida">                        
                            <label>Comida</label></br>                        
                            <input type="checkbox" name="cena" id="cena">
                            <label>Cena</label></br>
                            <input type="checkbox" name="cama_suplet" id="cama_suplet">
                            <label>Cama supletoria</label></br>
                            </br>
                        </div>
                        <div id="info_adicional">
                            <label class="etiquetas">Información adicional:</label></br>
                            </br>
                            <textarea name="adicional" rows="8" cols="40" placeholder="Sus datos de interes"></textarea></br>
                            </br>
                        </div>                        
                        <button type="reset">Borrar</button>
                        <button type="submit" href="mailto:reservas@mihotel.com">Enviar</button>
                    </fieldset>
                </form>
            </section>
        </div>
        </br>            
        <footer style="font-family:Arial; text-align:center">
            Derechos Reservados &copy; 2015            
        </footer>        
    </body>
</html>

No hay comentarios:

Publicar un comentario

¡Danos tu opinión!