I wanted to know how to put a radio button next to another radio button in a more simple way. I am learning CSS but I cannot figure out yet how to do it. My actual code is the next one:
<form action="evaluacion.php" method="post" id="test">
Coloca el simbolo de magnitud correcto: <br><br> ¿Cuál es el símbolo de magnitud correcto de la longitud?
<br>
<div>
<input type="radio" name="pregunta1" id="pregunta1rA" value="A" required/>
<label for="pregunta1ra">T</label>
<br>
</div>
<div>
<input type="radio" name="pregunta1" id="pregunta1rB" value="B" required/>
<label for="pregunta1rb">J</label>
<br>
</div>
<div>
<input type="radio" name="pregunta1" id="pregunta1rC" value="C" required/>
<label for="pregunta1rc">N</label>
<br>
</div>
<input type="submit" value="Enviar respuestas"><br><br><br>
</form>
And my current CSS is this one: div { display: inline-block;}
This is my current code but I want to know if there is a better way to the inline sentence without using a lot of "div"
The br tags were the ones breaking it. You can accomplish this without any divs.
<body>
<form action="evaluacion.php" method="post" id="test">
Coloca el simbolo de magnitud correcto: <br><br>
¿Cuál es el símbolo de magnitud correcto de la longitud?
<br>
<input type="radio" name="pregunta1" id="pregunta1rA" value="A" required/>
<label for="pregunta1ra">T</label>
<input type="radio" name="pregunta1" id="pregunta1rB" value="B" required/>
<label for="pregunta1rb">J</label>
<input type="radio" name="pregunta1" id="pregunta1rC" value="C" required/>
<label for="pregunta1rc" >N</label>
<input type="submit" value="Enviar respuestas"><br><br><br>
</form>
https://jsfiddle.net/2k05eLjh/
In general if you do need a wrapper for something like this, you can look into wrapping a set instead of each individual item before resorting to that.
Related
How can I group labels in a semantic way? e.g.:
If I was making a form about favorite foods, as in:
<form>
<label for="food1">Rice</label>
<input type="checkbox" id="food1" name="food"><br>
<label for="food2">Pasta</label>
<input type="checkbox" id="food2" name="food"><br>
<label for="food3">Meat</label>
<input type="checkbox" id="food3" name="food"><br><br>
<input type="submit" name="submit" value="submit">
</form>
Would I put a <h2>Favorite foods</h2> before them or is there any more semantically appropriate tag for it?
The question is pretty general and kind of boils down to preference, but you could use a fieldset tag to group the fields, and then use a legend tag for the header.
https://www.w3schools.com/tags/tag_fieldset.asp
https://www.w3schools.com/tags/tag_legend.asp
<form>
<fieldset>
<legend>Favorite Foods</legend>
<label for="food1">Rice</label>
<input type="checkbox" id="food1" name="food"><br>
<label for="food2">Pasta</label>
<input type="checkbox" id="food2" name="food"><br>
<label for="food3">Meat</label>
<input type="checkbox" id="food3" name="food"><br><br>
</fieldset>
<input type="submit" name="submit" value="submit">
</form>
I have this html which i want to target with css. The problem is that i can't find the right css selector.
The problem is that . entry-content doesn't work. Neither does.event-manager-form. The form itself is a Wordpress event manager form and want to style in with, amongst others,, border-radius
<div class="entry-content">
<form action="/post-an-event/" method="post" id="submit-event-form" class="event-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Your account</label>
<div class="field
account-sign-in">
You are currently signed in as <strong>Bla bla</strong>. <a c class="button" href="...">Sign out</a>.
</div>
</fieldset>
<!-- Event
Information Fields -->
<h2 class="section-title">Event Details</h2>
<fieldset class="fieldset-event_title">
<label for="event_title">Event Title<span class="require-field">*.
</span></label>
<div class="field required-field">
<input type="text" class="input-text event_title" name="event_title" id="event_title" placeholder="Event title" attribute="" value="" maxlength="" required />
</div>
</fieldset>
<fieldset class="fieldset- event_online">
<label for="event_online">Online Event<span class="require-
field">*</span></label>
<div class="field
required-field">
<label><input
type="radio" name="event_online" id="event_online"
attribute="" value="yes" /> Yes</label>
<label><input
type="radio" name="event_online" id="event_online"
attribute="" value="no" /> No</label>
Ive redone some of the code and tried this, but my print function doesn't work. If it got working would this only print the div id example?
<div id='example'>
<h3>Saturday Sept. 8th</h3>
</p><strong>7:00AM-8:00AM</strong> </p>
<input type="radio" name= "one" /><label> meditation meeting</label>
<br>
<input type="radio" name= "one" <label> step 1 workshop</label>
<br>
<input type="radio" name= "one"<label > Bottom lines</label>
<br>
<input type="radio" name= "one"<label > Top Lines</label>
<br>
<input type="radio" name= "one"<label> Sponsorship</label>
<br>
<input type="radio" name= "one"<label> Being a Sponsee</label>
<br>
<br>
</p> <strong>8:15AM-9:15AM</strong></p>
<input type="radio" name= "two"<label> Step 2 workshop</label>
<br>
<input type="radio" name= "two"<label>Living life</label>
<br>
<input type="radio" name= "two"<label> chairing a meeting</label>
<br>
<input type="radio" name= "two"<label>Service work</label>
<br>
<input type="radio" name= "two"<label> Accepting gifts</label>
<br>
<input type="radio" name= "two"<label>Principles before Personalities</label>
<br>
<input type="button" value="Print" onclick="printPage('example');"></input>
</div>
You can't control printing in the web browser because that's a user-end functionality, so a workaround/hackie way is required, what I usually do is the following:
You can make a di that will appear in the middle of the screen covering everything behind it using the z-index property
And then fill it with desired content to be printed
And then Right-click==>Print
And then on the printing dialog you can resize the printed content as needed.
I would like to implement something similar to a google search with radio buttons. Depending on the radio button selected, would change the type of search (search,images,video, etc).
Right now I have:
<div id ="searchtext">
<form method="get" id ="searchbox" action="http://www.google.com/search"/>
<input type="text" name="q" size="30" class="searchtext" maxlength="255" value="" />
<input type="image" value="Search" class="searchbutton" src="images/searchbar/searchbutton.png"/>
<br/>
</div>
<div id="radiosearch">
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://www.google.com/search?q=';" checked="checked"/> Web
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://images.google.com/images?q=';"/>Images
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://maps.google.com/maps?hl=en&tab=wl?q=';"/>Maps
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://www.youtube.com/results?q=';"/>Youtube
<span class = "class1">
Change Theme
</span>
</div>
However, clicking on the radio boxes is not changing the form action. Any Ideas?
Try
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://www.google.com/search?q=';" checked="checked"/> Web
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://images.google.com/images?q=';"/>Images
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://maps.google.com/maps?hl=en&tab=wl?q=';"/>Maps
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://www.youtube.com/results?q=';"/>Youtube
This is one thing that I really hate within development is forms. Below is my code and what I am trying to do is align the inputs with the labels Name: input. Is there a rule that you use to help remember when coding forms?
CSS:
#newwebsiteForm form{
padding:10px;
margin:10px 0;
width:480px;
position: relative;
}
#newwebsiteForm label{
width:240px;
display:block;
float:right;
}
#newwebsiteForm input{
width:240px;
display:block;
float:left;
}
HTML:
<section id="content">
<h1>Free Quote</h1>
<p>Please fill out the below questionnaire to receive your free web development quote</p>
<form action="" method="post" accept-charset="utf-8">
<select name="requiredOption" id="requiredOption">
<option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option>
<option id="newwebsite" value="newwebsite">New Website</option>
<option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option>
<option id="other" value="other">Other</option>
</select>
</form>
<div id="newwebsiteSection">
<form action="" id="newwebsiteForm" method="get" accept-charset="utf-8">
<fieldset>
<label>Do You Require Hosting?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>Do You Require A Domain?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>Do You Have A Logo?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>What is your Domain?</label>
<input type="url" name="domain" value="http://example.com"></input></div>
<label>Type of site Required?<label>
<select name="newwebsiteType" id="newwebsiteType">
<option value="shoppingCart">Shopping Cart</option>
<option value="CMS">Content Management System</option>
<option value="static">Static Website</option>
<option value="otherDevelopment">Other Development</option>
</select>
<label>Do You Require A Design?</label>
<input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>Three Favorite colors?</label>
<input name="color1" value=""></input>
<input name="color2" value=""></input>
<input name="color3" value=""></input>
<label>What are your favorite websites?</label>
<input type="text" name="fav1" value=""></input>
<input type="text" name="fav2" value=""></input>
<input type="text" name="fav3" value=""></input>
<label>Comments?</label>
<textarea name="comments" id="comments"></textarea>
<input type="submit" name="submit" value="Send Quote Request">
</form>
</div>
<div id="websiteredevelopmentSection">
<p>Website Redevelopment</p>
</div>
<div id="otherSection">
<p>Other</p>
</div>
</section>
Just because tables are the easier option doesn't make using them right.
Here's a great article about css form design.
http://www.alistapart.com/articles/prettyaccessibleforms
The author suggests storing each label/input element in an ordered list element keeping them grouped.
I've just used this to implement a bunch of forms for various mini sites and it worked a treat!
You can align the label next to the input or above just by changing the ol li label element's display property from display:inline-block to display:block respectively.
Getting the text to align next to a radio button or checkbox can be a bit tricky but is possible by adding and styling a span element.
BEST OF ALL IT'S CROSS BROWSER COMPATIBLE!
Hope that helps.
This is probably related to the question: <div> usage correctly? Can't get the columns to line up: You can also check my comments there for some reference when dealing with semantically-correct forms.
The approach you will need to be in habit of is always structure your markup correctly first before jumping to any CSS (or styling).
A <form> is composed of the following:
The <form> itself.
The <fieldset>: acts a the container of the different sections of your <form>
The <legend>: acts as the heading of the <fieldset>
The <input />: for fields, checkboxes, radio buttons, and submit button
The <button>: an alternative for <input type="submit">, which can wrap something
inside of it.
The <select>: a list of values inside a drop-down menu.
The <label>: from the name itself, the label of the <input />, <button> and <select>
To illustrate, you can check this example:
<form>
<fieldset>
<legend>Form Heading: </legend>
<fieldset>
<legend>Group 1 Heading: </legend>
<label for="input-id">Input Label: </label>
<input id="input-id" />
</fieldset>
<fieldset>
<legend>Group 2 Heading: </legend>
<label for="select-id">Select Label: </label>
<select id="select-id">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</fieldset>
<input type="submit" value="Submit" />
</fieldset>
</form>
With the exception of radio (<input type="radio" />) and checkboxes (<input type="checkbox" />), where the <label> should come after the <input />
You have to use the label element as follows to correctly align them:
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
I wrap each input/label pair in a <div>. This helps a lot with styling.
<div class="form-item">
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" />
</div>