Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
On my website, I have created a sidebar. However, I want a padding of 40px between the content in the sidebar and the border of the sidebar. I have tried this but for some reason, it didn't work. What's going on?
My code:
.sidebar {
padding: "40px 40px 40px 40px";
}
<div id="sidebar">
<form id="signUp" name="signUp">
<p>
<b>Hey!</b> Want to post comments and receive cool information about me? If You Do, Sign Up Now! :D<br>
<br>
Nickname: <input id="nickname" placeholder="Nickname" required="" type="text"><br>
Email Address: <input id="email" maxlength="254" placeholder="Email Address" required="" type="text"><br>
Password: <input id="password" placeholder="Password" required="" type="password"><br>
<input onclick="confirmAccount" type="button" value="Submit">
</p>
</form>
</div>
Using the correct selector (# instead of .) and removing the quotes and then this should work.
#sidebar {
padding: 40px 40px 40px 40px;
}
<div id="sidebar">
<form id="signUp" name="signUp">
<p>
<b>Hey!</b> Want to post comments and receive cool information about me? If You Do, Sign Up Now! :D<br>
<br>
Nickname: <input id="nickname" placeholder="Nickname" required="" type="text"><br>
Email Address: <input id="email" maxlength="254" placeholder="Email Address" required="" type="text"><br>
Password: <input id="password" placeholder="Password" required="" type="password"><br>
<input onclick="confirmAccount" type="button" value="Submit">
</p>
</form>
</div>
Remove your `"'s...
Try #sidebar { padding: 40px 40px 40px 40px; } instead.
Or you can just use #sidebar { padding: 40px; } as you need all sides padding 40px...
First of all your div has an id so use # instead of .. Second remove the quotes from the padding values - as they are all the same you can just use one 40px value. The folllowing should work:
#sidebar {
padding: 40px;
}
You have put .sidebar in your css style, which is a tag associated with a class (.).
For ids, such as your sidebar, always use a hash (#) to identify them in CSS. In this case you need to put #sidebar instead of .sidebar in your code.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
What's a reasonable strategy for solving this problem that meets the understanding level of a novice coder?
Here's what I've tried so far for a writing a simple form: 1) write the html in its entirety 2) style it 3) try to change the html to suit the style methods I'm trying to apply
It doesn't work because I get confused about how I should structure the html hierarchy to suit the design parameters I have on paper.
Here's where I am: https://codepen.io/tapzx2/pen/wvMgGGY
<div class="baby-form">
<h2>Class Signup</h2>
<form action="#" method="post">
<ul>
<li>
<input type="text" name="first-name" id="first-name">
<label for="first-name">First Name</label>
</li>
<li>
<input type="text" name="last-name" id="last-name">
<label for="last-name">Last Name</label>
</li>
<li>
<input type="email" name="email" id="email">
<label for"email">Email</label>
</li>
<li>
<button type="submit">Register</button>
</li>
</ul>
</form>
Here's where I'd like to go: https://codepen.io/tapzx2/pen/qBbqxjX
<div class="content-container">
<h2>Class Signup</h2>
<div class="form-container">
<form>
<div class="question-container">
<div class="question">
<label for="first">First Name</label>
<input type="text" id="first" name="first">
</div>
<div class="question">
<label for="last">Last Name</label>
<input type="text" id="last" name="last">
</div>
<div class="question">
<label for="email">Email Address</label>
<input type="email" id="email" name="email">
</div>
</div>
<button type="submit">Register</button>
</form>
</div>
</div>
I struggled with this for a long time too. My CSS never had the effect that I wanted it to. Practice is key, but I find that when beginning, it is easier to take a "general-to-specific" or approach and style as you go.
Once you are comfortable with CSS, you can do all the HTML before you start styling. In the meantime, I recommend you style with each layer (see below).
For example, if I wanted to build what you've given as your end result I would do something like...
Create a wrapper that will contain all content, because everything will be centered. Set the width, display, etc. for the wrapper.
Inside the wrapper, add a <form>. Style the form if needed.
Inside the form, add a <header>, and inside the header, add an <h_> tag. The header isn't necessary, but it makes it easier to add other elements to the top of the form in the future.
Inside the form, create a <fieldset> followed by a button. Style the button. You can put the button in a footer if you want.
Inside the fieldset, create 3 input wrappers. Each will contain a label and an input. Style the wrappers.
Add the labels and inputs inside each wrapper. Style these and style the fieldset if needed.
I like to work downwards in layers, don't start working on new child elements until the layer is complete. I started with the "general" elements (ex. the main wrapper) and worked towards the "specifics" (ex. the labels, inputs, buttons). As you style each layer, be conscious of what will be in the next. Eventually you'll get the feel of what elements you need to have in place so that you can style properly.
this way:
see JS Code : there is only one const (myForm) needed for access every form elements.
Form elements necessarily need a name attribute (used on the submission), and their use is easy to match in JS to identify each element of the form
const myForm = document.getElementById('my-form')
myForm.onsubmit=e=>
{
e.preventDefault()
console.log( 'first-name = ', myForm['first-name'].value )
console.log( 'last-name = ', myForm['last-name'].value )
console.log( 'email = ', myForm.email.value )
}
#my-form {
width: 14em;
margin: 1em auto;
}
fieldset {
border: 1px solid lightblue;
padding: 1em .6em 0em .6em;
}
label {
display: block;
float: left;
clear: both;
min-width: 12em;
margin-bottom: 1em
}
button {
margin-top: 1em;
float: right;
}
<form action="#" method="post" id="my-form">
<fieldset>
<legend>Class Signup</legend>
<label>
First Name
<input type="text" name="first-name" >
</label>
<label>
Last Name
<input type="text" name="last-name" >
</label>
<label>
Email Address
<input type="text" name="email" >
</label>
</fieldset>
<button type="submit">Register</button>
</form>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am currently trying to implement a simple feedback form for my site. However, the boxes are very small and don't really match the theme of my site at all. I have tried increasing text size and margin with CSS, but I can't seem to make them larger.
Any help would be greatly appreciated!
<form action="form" method="POST" class="formone">
<input type='text' name='name' placeholder='John Doe' /><br/>
<input type='text' name='message' placeholder='Your message'/><br/>
<input type='submit' value='submit' />
</form>
You can modify it by giving them a class and then defining the font-size for those classes.
For example:
.one{
font-size: 20px;
}
.two {
font-size: 40px;
}
<form action="form" method="POST" class="formone">
<input class="one" type='text' name='name' placeholder='John Doe' /><br/>
<input class="two" type='text' name='message' placeholder='Your message'/><br/>
<input class="three" type='submit' value='submit' />
</form>
I hope it helps.
Edit:
You can also try using inline style like this if it's not working due to some other style statement overriding this:
<form action="form" method="POST" class="formone">
<input style="font-size:20px !important;" type='text' name='name' placeholder='John Doe' /><br/>
<input style="font-size:30px !important;" type='text' name='message' placeholder='Your message'/><br/>
<input type='submit' value='submit' />
</form>
I would recommend to use textarea and using text area you can set height and width of it.
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
In text area rows and cols are set as default textarea size and it is expandable.
As you have used <input type='text'/> It does not holds property of height and width so you cannot change it with css.
For better understanding refer these two links : https://www.w3schools.com/tags/att_input_width.asp
https://www.w3schools.com/html/html_form_elements.asp
Hope it helps
Thanks
I've inherited a legacy codebase and am tasked with overriding a handful of CSS selectors (among other things). Simple. But I've encountered a weird ID that I can't figure out how to override.
Here's a code snippet:
<form id="formInfo" name="formInfo" method="post">
<label>Phone Number*</label>
(
<input id="formInfo:areaCode" name="formInfo:areaCode" type="text" value="" maxlength="3" size="3" class="autotab">
) -
<input id="formInfo:phonePrefix" name="formInfo:phonePrefix" type="text" value="" maxlength="3" size="3" class="autotab"><input id="formInfo:phoneSuffix" name="formInfo:phoneSuffix" type="text" value="" maxlength="4" size="4">
</form>
All I'm trying to do is add 10px of margin to the left of the last input so the two fields aren't butted up against one another.
I'm unfamiliar with this syntax. I've never seen IDs conjoined with a colon (:) before.
Here's what I've tried:
#formInfo:phoneSuffix {
margin-left: 10px;
}
#phoneSuffix {
margin-left: 10px;
}
#formInfo #phoneSuffix {
margin-left: 10px;
}
As expected, none of these approaches adds the desired margin.
Here's my fiddle if you want to work from that.
Restrictions: As I said, this is legacy code. Unfortunately, I don't have the ability to change or add to the markup. This is a SPA that is used in multiple applications. Changing it might have unintended side effects. I have to deal with it as part of my SPA and override the input margins. Not ideal, but that's the situation.
You could use backslash to escape the colon
#formInfo\:phoneSuffix {
margin-left: 10px;
}
See: Handling a colon in an element ID in a CSS selector
You could use an attribute selector.
[id='formInfo:phoneSuffix'] {
margin-left: 10px;
}
<form id="formInfo" name="formInfo" method="post">
<label>Phone Number*</label>
(
<input id="formInfo:areaCode" name="formInfo:areaCode" type="text" value="" maxlength="3" size="3" class="autotab">
) -
<input id="formInfo:phonePrefix" name="formInfo:phonePrefix" type="text" value="" maxlength="3" size="3" class="autotab"><input id="formInfo:phoneSuffix" name="formInfo:phoneSuffix" type="text" value="" maxlength="4" size="4">
</form>
I have a simple form like this:
<form method="post" action="/registration">
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
<br>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
<br>
<input type="button" value="registger">
</form>
It works fine, but the I have found out that <br> shouldn't be used for this purpose, as it is only intended to be used with text.
If I remove the <br>, then everything will be rendered on a single line, which I do not want.
What is the correct, most clean way to display name-input pairs in a form with CSS, like this:
Alias: [__field__]
E-mail: [__field__]
[SUBMIT BUTTON]
I'd use divs, which will put the labels and inputs into their own block.
<form method="post" action="/registration">
<div>
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
</div>
<div>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
</div>
<input type="button" value="registger">
</form>
I typically would put the input inside of the label (so when you click the label, it focuses the input), and then tell the label to be display: block;.
So,
<form method="post" action="/registration">
<label for="alias">
Alias: <input type="text" name="alias" id="alias">
</label>
<label for="email">
E-mail: <input type="text" name="email" id="email">
</label>
<input type="button" value="registger">
</form>
Then do:
label[for], // just selects labels that have the "for" attribute.
input[type="button"] {
display: block;
// And a bottom margin for good measure :)
margin: 0 0 10px; // shorthand for margin-bottom
}
And that should get you what you want.
You could use divs with corresponding CSS:
.myFrm {
width: 250px;
}
input[type=text] {
float: right;
}
.form-group {
margin-bottom: 10px;
}
.form-group::after {
content: "";
clear: both;
display: table;
}
<form method="post" action="/registration">
<div class="myFrm">
<div class="form-group">
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
</div>
<div class="form-group">
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
</div>
</div>
<input type="button" value="registger">
</form>
I would just use a bit of css to do the trick. Give each of the labels a display:block;
label {
display: block;
}
You can use container divs around the label and input to group them or else make sure "display: block" is added to the label and input elements.
If you need the label to the left of the input then wrap both with a container div and to give you more control on the positioning you could float the label and input to the left or use flexbox.
You ask:
What is the correct, most clean way to display name-input pairs in a
form with CSS
I interpret your question to be related to matters of performance, code efficiency and maintainability. Since just changing the HTML structure does not address responsiveness in different view-ports, adding bits of CSS may have render blocking features but it does nevertheless makes your application ready for mobile responsiveness. This is how I see it:
form {
display: inline-block;
}
label {
margin: 10px;
font-weight: 600;
}
input{
position: absolute;
left: 15%;
}
input[type=button]{
top: 4%;
}
Note that for mobile viewports you may want to adjust the relative measures with media queries. So the question here is not about writing less code but the main requirements of the application.
Get a plunk for this here
What you have there is a list.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists
http://reisio.com/temp/form1.html
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm working on HTML and I'm trying to introduce a box in the middle of the page with two text buttons to insert username and password. I find the way to create the box with the text inside, like the one that disappear when you click on it. How can I do it? Thanks for all!
I was able to create the button and the onClick option for the Tune In but I don't know how to do the two text buttons
That's not a button but instead an input. You can insert them inside your form like this:
<form action="#">
<input type="text" placeholder="Username" />
<input type="text" placeholder="Password" />
</form>
As suggested in the comments, use the placeholder attribute
<input type="text" name="username" placeholder="Username">
For the password you can also add a password type to prevent the plain text from appearing
<input type="password" name="pwd" placeholder="Password>
So
<form action="#" style="text-align:center">
<input type="text" name="username" placeholder="Username"><br>
<input type="password" name="pwd" placeholder="Password">
<div class="button">
<button type="submit">Tune In</button>
</div>
</form>
The above code is now centered per your request. You can put the styling in CSS as well
input[placeholder] {
font-size: 20px;
text-align: center;
}
<input type="text" name="username" placeholder="username"></p>
<input type="text" name="password" placeholder="password"></p>
EDIT
To increase the placeholder's font size and center the text:
input[placeholder] {
font-size: 20px;
text-align: center;
}
Here is how it will work
<input type="text" placeholder="Enter User Name">
and I think you should make your password text box of password type as follows
<input type="password" placeholder="Enter password">
or another aproach if you want to include a little jquery so it will be old browsers compatible.
html:
<form action="#">
<input type="text" class="txtInside" defaultval="user" >
<input type="text" class="txtInside" defaultval="pass" >
</form>
jquery:
$('body').ready(function () {
$('.txtInside').each(function () {
$(this).val($(this).attr('defaultVal'));
$(this).css({ color: '#999999' });
});
$('.txtInside').focus(function () {
if ($(this).val() == $(this).attr('defaultVal')) {
$(this).val('');
$(this).css({ color: '#000' });
}
});
$('.txtInside').blur(function () {
if ($(this).val() == '') {
$(this).val($(this).attr('defaultVal'));
$(this).css({ color: '#999999' });
}
});
});
Example: http://jsfiddle.net/fhs43ke8/
In thsi case you write the test you want in "defaultval". the script include a change of text color in case you want it