Given the form code below, Is it possible to populate placeholder attributes for the form input fields by reading in the text of the adjacent label
Raw html
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address</label>
<input type="email" value name="EMAIL" class="required email" id="mce-EMAIL">
</div>
Effective desired output after CSS conversion
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address</label>
<input type="email" value name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address">
</div>
In other words, I want to use CSS (perhaps generated content) to dynamically add a placeholder attribute on the input and make the value of the placeholder attribute reflect the label text (or hardcoded text if reading in the label text is beyond CSS)
CSS cannot modify HTML, so this is not possible.
Generated content, as the name implies, refers to content, not attributes, so it cannot be used to add or modify attributes either.
I am not sure why you don't want to use Javascript/Jquery for this, but if you change your mind it would be very simple to do.
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address</label>
<input type="email" value name="EMAIL" class="required email" id="mce-EMAIL">
</div>
then with jquery you could use this:
var labelText = $('label').html();
$('#mce-EMAIL').attr('placeholder', labelText);
Here is the fiddle
Related
I'm trying to add an email input to my form in HTML5, but somehow it still allows me to write anything without # and the other stuff that an email contains.
<input class="form-control" type="email" id="email" name="email" required>
Also tried:
<input type="text" pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" class="form-control" id="email" name="email" required>
and still nothing happens if I write it incorrectly.
If you are not trying to validate while typing, then it will automatically show error after you submit it.
<div class="form-group">
<label ***id="email-label"*** for="email">Email</label>
<input
type="email"
name="email"
id="email"
class="form-control"
placeholder="Enter your Email"
required
/>
</div>
I know that ID in input is needed if you want to refer it by a label and that I understand but in this instance there is an ID in label and i do not know why it is there. I thought they wanted to create an ID so that they can refer it in CSS with "email-label" but I could not find any ID under that name.
Could you please tell me what this email-label in Label do? Thank you!
It would do the same as in other elements, you can access the elment through CSS #email-label or JS getElementById("email-label").
Im working on one of my 5 projects in the freecodecamp Responsive Web Design course (the survey project) and I am trying to use the built in required function in html5 in my email input but it isn't working, when I click enter rather than giving the little popup asking for a valid email address with an # in it, nothing happens at all. Im a very new developer so humor me if im asking a dumb question but I can't seem to figure it out on my own.
HTML:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" required>
</form>
Normally validation doesn't run unless you try to submit the form.
Add a submit button after your input element and try the same code. The end result could be something like this:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" name="email" required>
<button type="submit">Submit Me</button>
</form>
If you require to send the form to a specific file to do the submission process you could add an action attribute to the form tag but from what you are saying that's outside of what you're currently studying.
EDIT based on Tieson T.'s comment
I added the name="email" to the email input in the code example.
I am trying to get one of those MailChimp embedded forms to work on my website (WordPress). The placeholder text for the Email field, etc. isn't disappearing like it's supposed to.
I'm using this code:
< input type="email" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus=”if(this.value==this.defaultValue)this.value=’‘;” onblur=”if(this.value==’‘)this.value=this.defaultValue;” >
I tried messing around with a placeholder attribute as well, but didn't get anywhere with that either.
Suggestions? (Thank you!)
It appears your the special quote characters are throwing off the Javascript parser (tested in Chrome stable on Windows).
<input type="email" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" >
The proper solution here to prevent this from occurring is to use a proper Javascript IDE that will insert valid double quotes.
You have a problem with spacing (before the input tag, and quotation marks
<input type="email" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if (this.value==this.defaultValue) this.value='';" onblur="if (this.value=='') this.value=this.defaultValue;">
I have a form and I need to show the info like this:
Your name Your address
Your email Your password
Submit
Now I got something like this:
<fieldset class="left">
<input type="text" id="name" placeholder="Your Name*"/>
<input type="email" id="email" size="50" placeholder="Your Email*"/>
</fieldset>
<fieldset class="right">
<input type="text" id="tel" size="50" placeholder="Your address*"/>
<input type="text" id="cel" size="50" placeholder="Your password*"/>
<input type="submit" value="Submit"/>
</fieldset>
My class:
.left{float:left;}
.right{float:right;}
But it doesn't work...
Any ideas?
And the demo: http://jsfiddle.net/Nu5fG/
It has to do with the "size" settings of your input fields. Change them all to 20 and they do what you want.
The comment above is minimally helpful, so let me see if I can give you something substantive.
In this case, I don't think table layout is that bad of a thing. The data are "kind-of" tabular.
You'll have to widen your page, or shrink the input elements down to the minimum size possible.
Do you really need two sets of fieldsets?
Can you get away with a small font? Are the fields in a popup?