Two radio input dialing in the same buged form/header padding

Asked

Viewed 115 times

0

All right? So, I have a problem, I have a form with 2 radios... It is to mark one or the other, but you can mark both...

Here he is:

<div class="budget-wrapper">
    <header>
        <h1><i class="fa fa-dollar"></i>Solicitando orçamento</h1>
    </header>
    <form method="post" id="form-radio" name="form-radio">
    <div class="blank">
        <h1>Para quem é o projeto?</h1>

        <div class="form-radio">
        @csrf
        <fieldset>
            <h1 style="width:auto"><input type="radio" id="empresa" name="empresa" value="empresa" form="form-radio" >Empresa </h1>
            <h1>&nbsp<u>o</u>u</h1>
            <h1><input type="radio" id="pessoal" name="pessoal" value="pessoal" form="form-radio" >Pessoal</h1> 
        </fieldset>
        </div>
    </div>

    <footer>
        <button type="submit"><h1>Continuar</h1></button>
    </footer>
    </form>
</div>

What could be going on? In other forms with radios, the same thing is happening...

The problem with the header is that if you padding-right:30% he doesn’t get the padding, so I have to put in the element that’s right, margin-right:60%;float:right; the padding-left works normally, with 30%... What can it be?

/*PADDING DIVS*/
.div-padding{padding-left:30%;padding-right:30%;}

/*HEADER*/
.header{z-index:3;background-color:#343434;width:100%;position:fixed;top:0px;height:75px;padding-left:30%;}
.header button{margin-top:26px;margin-right:60%;float:right;position:relative;background-color:#5f06d9;border:none;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
.header button h1{cursor:pointer;padding:5px;padding-right:10px;padding-left:10px;color:#fff;}
.header button h1 i{margin-right:10px}
.header button h1 a{color:#fff;text-decoration:none}



<header class="header">
    <a href=""><img src="/css/images/logo.png" class="logo" rel="logo"></a>
    <button id="budget-btn"><h1><i class="fa fa-dollar"></i>Solicitar orçamento</h1></button>
</header>

Thank you.

html css html5

  • Welcome. Take a [tour] to better understand how Stack Overflow works. I suggest that you divide the problems of your code into two separate questions, this one to address the issue of input=radio and another for the problem related to padding/margin.

  • Possible duplicate of Mark only one radiobutton for each line

1 answer

1

The attribute name the elements must be equal so that it can control which option is selected. In your case, each one has a name: pessoal and empresa, so it doesn’t work.

A <input name='selecao' value='A' type='radio'><br>
B <input name='selecao' value='B' type='radio'>

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.