Comunidad de diseño web y desarrollo en internet online

habilitar en varios formularios

Citar            
MensajeEscrito el 09 Ago 2016 09:09 pm
Tengo tres formularios en una misma página. Todos los elementos vienen deshabilitados excepto los input que encabezan cada formulario. Necesito que estos input habiliten cada formulario. Como son varios formularios al mismo tiempo he quedado medio topado con el código. Adjunto el código. Gracias.

Código HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>cervezas</title>
        <style>
.formulario {
    margin-top: 5.5%;
    margin-left: 5.5%;
    margin-right: 5.5%;
    display: inline-flex;
}

.formulario.mahou {
    width: 25%;
}

.formulario.heineken {
    margin: auto;
    width: 25%;
}

.formulario.carlsberg {
    width: 25%;
}

.datos label {
    opacity: 0.5;
}

.encabezado {
    height: 50px;
    font-weight: 600;
}

input[type=text] {
    width: 100%; 
}

select {
    width: 100%;
}

textarea {
    width: 98%;
}

input[type=submit] {
    display: block;
    margin: auto;
}

input[type="text"]:disabled { 
    background: #E5E5E5; 
}

textarea:disabled {
    background: #E5E5E5; 
}

select:disabled {
    width: 100%;
    color: #BBBBBB;
    background-color: #E5E5E5;
}

input[type=submit]:disabled {
    background-color: #E5E5E5;
    color: #BBBBBB;
    margin: auto;
}
        </style>
        </head>
<body>
    
    
<div class="formulario mahou">
<form name="mahou" method="post" action="">
 
<div class="encabezado">
    <input type="radio" name="cerveza" value="mahou">&nbsp;&nbsp;MAHOU
</div>
            
<div class ="datos">
    <label for="nombre">Nombre:</label>
    <input type="text" name="nombre" disabled>
 
    <label for="email">Email:</label>
    <input type="text" name="email" disabled>

    <label for="telefono">Teléfono:</label>
    <input type="text" name="telefono" disabled>
</div>

<div class="datos">
        <label for="vasos">Cuantos vasos tomas a la semana?:</label>
        <select name="vasos-mahou" disabled>
            <option value="m1">menos de 10</option>
            <option value="m2">menos de 20</option>
            <option value="m3">menos de 30</option>
            <option value="m4">menos de 40</option>
        </select>
</div>
        
<div class="datos">
        <label for="marca">Cómo te enteraste de la marca?</label>
        <textarea name="marca" disabled></textarea>
</div>
    
<div class="datos">
        <input type="submit" value="enviar" disabled>
</div>
</form>
</div>
    
    
<div class="formulario heineken">
    <form name="heineken" method="post" action="">
 
<div class="encabezado">
    <input type="radio" name="cerveza" value="heineken">&nbsp;&nbsp;HEINEKEN
</div>
            
<div class ="datos">
    <label for="nombre">Nombre:</label>
    <input type="text" name="nombre" disabled>
 
    <label for="email">Email:</label>
    <input type="text" name="email" disabled>

    <label for="telefono">Teléfono:</label>
    <input type="text" name="telefono" disabled>
</div>

<div class="datos">
        <label for="vasos">Cuantos vasos tomas a la semana:</label>
        <select name="vasos-heineken" disabled>
            <option value="h1">menos de 10</option>
            <option value="h2">menos de 20</option>
            <option value="h3">menos de 30</option>
            <option value="h4">menos de 40</option>
        </select>
</div>
        
<div class="datos">
        <label for="marca">Cómo te enteraste de la marca?</label>
        <textarea name="marca" disabled></textarea>
</div>    


<div class="datos">
        <input type="submit" value="enviar" disabled>
</div>
</form>
</div> 

    
<div class="formulario carlsberg">
     <form name="carlsberg" method="post" action="">
 
<div class="encabezado">
    <input type="radio" name="cerveza" value="carlsberg">&nbsp;&nbsp;CARLSBERG
</div>
            
<div class ="datos">
    <label for="nombre">Nombre:</label>
    <input type="text" name="nombre" disabled>
 
    <label for="email">Email:</label>
    <input type="text" name="email" disabled>

    <label for="telefono">Teléfono:</label>
    <input type="text" name="telefono" disabled>
</div>

<div class="datos">
        <label for="vasos">Cuantos vasos tomas a la semana:</label>
        <select name="vasos-carlsberg" disabled>
            <option value="c1">menos de 10</option>
            <option value="c2">menos de 20</option>
            <option value="c3">menos de 30</option>
            <option value="c4">menos de 40</option>
        </select>
</div>
         
<div class="datos">
        <label for="marca">Cómo te enteraste de la marca?</label>
        <textarea name="marca" disabled></textarea>
</div>             

<div class="datos">
        <input type="submit" value="enviar" disabled>
</div>
</form>
</div>  
    
    
<script src="script.js"></script>
</body>
</html> 

Por MACM86

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 15 Ago 2016 10:20 pm
Olvidaste adjuntar el script.js :D pues esto es solo HTML Y CSS :(

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.