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>
Related
Looking for answers for HTML5 ONLY, no JS solutions please!
I'm only just beginning to code so I don't really know what to google to get the answer to this - I've already done a few good hours trying to figure it out in HTML5 only, but what I've found has all involved javascript, or didn't fix my problem. The question is:
Is there a way in HTML5 to reset the validation value once a form has been submitted once, and failed to submit/got rejected because of a missing value on a 'required' attribute? I want to make resubmission possible after someone checks the required box if they left it unchecked before, without refreshing the page.
The form in question is below, sorry for the shitpost aspects;
<html>
<head>
<h1>Register</h1>
<img src="http://elohell.net/public/comments/small/fb174f37e857128b2b5bdbf0d1c419dc.png" max height="100px" max width="100px">
</head>
<body>
<form method="link" action="https://youtu.be/eBRwu63-qfA">
<p>
<h2>Name</h2>
</p>
<label for="first">First:</label>
<input type="text" id="first" required oninvalid="this.setCustomValidity('Feed It Blood')" oninput="setCustomValidity('')">
<label for "last">Last:</label>
<input type="text" id="last" required oninvalid="this.setCustomValidity('Give More')" oninput="setCustomValidity('')">
<p></p>
<!--gender id-->
<p>
<h2>Gender</h2>
</p>
<label for="CM">Cis Man</label>
<input type="radio" id="CM" name="GS1">
<p></p>
<label for="TM">Trans Man</label>
<input type="radio" id="TM" name="GS1">
<p></p>
<label for="CF">Cis Woman</label>
<input type="radio" id="CW" name="GS1">
<p></p>
<label for="TF">Trans Woman</label>
<input type="radio" id="TW" name="GS1">
<p></p>
<label for="NBGF">Nonbinary/Genderfluid</label>
<input type="radio" id="NBGF" name="GS1">
<p></p>
<label for="AG">Agender</label>
<input type="radio" id="AG" name="GS1">
<p></p>
<label for="OTHER">Other</label>
<input type="text" name="OTHER" name="GS1">
<!--Email Password-->
<p>
<h2>Login Details</h2>
</p>
<label for="email">Email:</label>
<input type="email" name="email" required oninvalid="this.setCustomValidity('We Will Meet Soon')" oninput="setCustomValidity('')">
<label for="password">Password:</label>
<input type="password" name="password" minlength="5" maxlength="10" required oninvalid="this.setCustomValidity('Seal Your Fate')" oninput="setCustomValidity('')">
<!--Bday-->
<p>
<h2>Birthday</h2>
</p>
<label for="bday1">Which Month</label>
<select name="bday1">
<option></option>
<option>Jealousy</option>
<option>Federal Agent</option>
<option>Hell</option>
<option>April</option>
<option>Any Of The Rest</option>
</select>
<label for="bday2">The Day</label>
<select id="bday2">
<option></option>
<option>1</option>
<option>0</option>
<option>Void</option>
</select>
<label for="bday3">The Year Of THE Birth Crime</label>
<select id="bday3">
<option></option>
<option>X</option>
<option>666</option>
<option>Eternal</option>
</select>
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')" oninput="setCustomValidity('')" updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
</form>
</body>
</html>
The SPECIFIC part I'm having trouble with is this bit right here:
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')" oninput="setCustomValidity('')" updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
I'm not sure if there's something inside the rest of the form that's keeping this one part in particular from not working - the others all act as they're supposed to. If one is blank, it pops up with the custom warnings I set up, and after I fill it out, it doesn't cause me any issue anymore. The checkbox is the only one that has the persistent message popping up with the refusal to submit it again. If I check it WITHOUT submitting the form first, everything acts as it was supposed to when I do submit it.
I appreciate your help!
You have to change the oninput to onchange for input tags like this:
<html>
<head>
<h1>Register</h1>
<img src="http://elohell.net/public/comments/small/fb174f37e857128b2b5bdbf0d1c419dc.png" max height="100px" max width="100px">
</head>
<body>
<form method="link" action="https://youtu.be/eBRwu63-qfA">
<p>
<h2>Name</h2>
</p>
<label for="first">First:</label>
<input type="text" id="first" required oninvalid="this.setCustomValidity('Feed It Blood')" oninput="setCustomValidity('')">
<label for "last">Last:</label>
<input type="text" id="last" required oninvalid="this.setCustomValidity('Give More')" oninput="setCustomValidity('')">
<p></p>
<!--gender id-->
<p>
<h2>Gender</h2>
</p>
<label for="CM">Cis Man</label>
<input type="radio" id="CM" name="GS1">
<p></p>
<label for="TM">Trans Man</label>
<input type="radio" id="TM" name="GS1">
<p></p>
<label for="CF">Cis Woman</label>
<input type="radio" id="CW" name="GS1">
<p></p>
<label for="TF">Trans Woman</label>
<input type="radio" id="TW" name="GS1">
<p></p>
<label for="NBGF">Nonbinary/Genderfluid</label>
<input type="radio" id="NBGF" name="GS1">
<p></p>
<label for="AG">Agender</label>
<input type="radio" id="AG" name="GS1">
<p></p>
<label for="OTHER">Other</label>
<input type="text" name="OTHER" name="GS1">
<!--Email Password-->
<p>
<h2>Login Details</h2>
</p>
<label for="email">Email:</label>
<input type="email" name="email" required oninvalid="this.setCustomValidity('We Will Meet Soon')" oninput="setCustomValidity('')">
<label for="password">Password:</label>
<input type="password" name="password" minlength="5" maxlength="10" required oninvalid="this.setCustomValidity('Seal Your Fate')" oninput="setCustomValidity('')">
<!--Bday-->
<p>
<h2>Birthday</h2>
</p>
<label for="bday1">Which Month</label>
<select name="bday1">
<option></option>
<option>Jealousy</option>
<option>Federal Agent</option>
<option>Hell</option>
<option>April</option>
<option>Any Of The Rest</option>
</select>
<label for="bday2">The Day</label>
<select id="bday2">
<option></option>
<option>1</option>
<option>0</option>
<option>Void</option>
</select>
<label for="bday3">The Year Of THE Birth Crime</label>
<select id="bday3">
<option></option>
<option>X</option>
<option>666</option>
<option>Eternal</option>
</select>
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')"
onchange="setCustomValidity('')"
updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
</form>
</body>
</html>
I need to align two textfields in the same row, but one on the left and the other in the page center. I'm trying this:
<div class="pure-g margin-1-0">
<div class="pure-u-1-4">
<label for="tipologia">
<fmt:message key="label.table.lavorazioni.spese.tipologia"/>
</label>
<s:textfield cssClass="pure-u-23-24 required" size="35" name="" id="tipologia" />
</div>
<div class="pure-u-1-4" style="align:center">
<label for="valore">
<fmt:message key="label.table.lavorazioni.spese.valore"/>
</label>
<s:textfield cssClass="pure-u-23-24 required" size="35" name="" id="valore" />
</div>
</div>
But I see the left one correctly but the other remains next to the first and not at the center.
Any suggestion?
To align elements inside the container use text-align css rule. Struts2 tags use themes to generate additional content in the forms. So it could break the initial design.
<div class="pure-g margin-1-0">
<div class="pure-u-1-4" style="text-align:center">
<label for="tipologia">
<fmt:message key="label.table.lavorazioni.spese.tipologia"/>
</label>
<input type="text" class="pure-u-23-24 required" size="35" name="" id="tipologia" />
</div>
<div class="pure-u-1-4" style="text-align:center">
<label for="valore">
<fmt:message key="label.table.lavorazioni.spese.valore"/>
</label>
<input type="text" class="pure-u-23-24 required" size="35" name="" id="valore" />
</div>
</div>
JSFiddle
I have this html snippet:
<form class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Have an account?</label>
<div class="field account-sign-in">
<a class="button" href="">Sign in</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Job Title</label>
<div class="field required-field">
<input type="text" class="input-text" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Application email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
</div>
</fieldset>
</form>
And I would like to select first fieldset in the form. This what I am doing:
form.job-manager-form:first-child {
background-color: red;
}
But it selects all fieldset elements. How does :first-child works?
JSFiddle is here.
You need to target the element you want and then say it's the first-child.
There is an excellent article explaining how these selectors works:
useful-nth-child-recipies
fieldset:first-child {
background-color: red;
}
<form class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Have an account?</label>
<div class="field account-sign-in">
<a class="button" href="">Sign in</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Job Title</label>
<div class="field required-field">
<input type="text" class="input-text" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Application email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
</div>
</fieldset>
</form>
fieldset:first-child {
background-color: red;
}
This will work. However, your first-child fieldset is set to display:none; so it will not actually show the background color.
It selects an element if it is the first child of its parent.
Your selector doesn't select any fieldsets. It selects the form.
The fieldsets have a (default) transparent background, so you can see the red through them.
To select the fieldset that is the first child of a form you would need:
form.job-manager-form > fieldset:first-child
I have a checkbox button and a Paragraph side-by-side.
It's inline-block and everything is nice... Look:
When I turn my view into responsive, it just drops down a line. Like this:
How do I overcome this issue elegently in CSS without starting build divs around elements and bootstrap the whole deal here? Thanks!
re code; those are 2 columns and both button and paragraph reside in he left column.
EDITED FOR CODE ADDITION:
<div class="row no-pad">
<div class="col-xs-6 left-hand-input">
<!--FORM BEGIN-->
<form class="form-control-static" action="leadGen.php" method="post">
<p>PERSONAL DETAILS</p>
<hr>
<label for="firstName">FIRST NAME:</label><br>
<input name="firstName" id="firstName" type="text"><br>
<label for="email">EMAIL:</label><br>
<input name="email" id="email" type="email">
<p>SHIPMENT ADDRESS</p>
<hr>
<label for="address">ADDRESS:</label><br>
<input name="address" id="address" type="text"><br>
<label for="country">COUNTRY:</label><br>
<input name="country" id="country" type="text"><br>
<label for="zip">ZIP CODE:</label><br>
<input name="zip" id="zip" type="text"><br>
<input type="submit" id="submit" value="SEND">
<p style="display: inline-block; vertical-align: -10px;"> *Required fields</p><br>
<input checked type="checkbox" id="mailingList"/>
<p style="display: inline-block; font-size: 75%;">
Receive exclusive membership deals and offers.</p>
</form>
</div>
</div>
You need to use labels
<label><input type="checkbox" value=" id="mailingList">Receive exclusive membership deals and offers.</label>
Here is the jsfiddle demo: https://jsfiddle.net/o4qgu4gv/2/
You should also consider using col-sm-6 instead of col-xs-6 because it may look nice on an iPhone 4 screen
if it is for the checkbox or any input type tag in particular then a more suitable choice would be to use a label tag instead of a paragraph.
You could use label with its for attribute and it should work fine.
<div id="wrapper">
<input type="checkbox" id="btn"> check
<label for="btn">
this should not shift
</label>
</div>
I have the following markup:
<div class="control-group">
<label class="control-label" for="rdbActive">Active</label>
<div class="controls">
<label class="radio inline" for="rdbActive0">
<input name="rdbActive" id="rdbActive0" value="Yes" checked="checked" type="radio">Yes
</label>
<label class="radio inline" for="rdbActive1">
<input name="rdbActive" id="rdbActive1" value="No" type="radio">No
</label>
</div>
</div>
How do I make this runat=server?
For text input all I do is:
<div class="control-group">
<label class="control-label" for="txtDescription">Description</label>
<div class="controls">
<input id="txtDescription" runat="server" name="txtDescription" placeholder="" class="input-large" type="text">
</div>
</div>
..and I'm able to access it from code behind. If I add it to any radio button I get a 500 server error.
You may create radio button with runat="server" as:
<asp:RadioButton id="RadioButton1" AutoPostBack="True|False" Checked="True|False" GroupName="GroupName" Text="label" TextAlign="Right|Left" OnCheckedChanged="OnCheckedChangedMethod" runat="server" />
Where OnCheckedChangedMethod is the code-behind method which is invoked when the radio button is checked.
See this reference on MSDN website.