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
It is a simple html code,when i open it in firefox,no alignment between the input lines.
<!DOCTYPE html>
<html>
<body>
<form action="">
First name(xing): <input type="text" name="firstname"><br>
Last name(min): <input type="text" name="lastname">
</form>
<p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
How can i make alignment in the form?
Try putting the text before the form input in a span tag and styling it:
<span style="display:inline-block; width:125px">First name(xing): </span>
<input type="text" name="firstname">
<br>
<span style="display:inline-block; width:125px"> Last name(min): </span>
<input type="text" name="lastname">
Note: you can only use the width attribute if you use the style "display:inline-block".
Another method of doing this is:
<input type="text" name="fname" placeholder="First name(xing)"><br>
<input type="text" name="lname" placeholder="Last name(min)"><br>
This is HTML5 placeholder property.
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
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I'm looking for a way to make some CSS only apply if an input outside the style sheet has a certain value.
In the example below I only want to run the CSS if the input value below is "4625585".
It is from a form where the submit button sends the input value (among other things).
Is that possible at all when I only have access to CSS and not the HTML code of the form.
Kindly, Rasmus
-
Here is the CSS
<style type="text/css">
.wForm {
font-family: sans-serif;
}
</style>
<input value="4625585">
-
Here is the HTML:
<form>
<div id="tfa_6" class="wForm">
<input type="text" placeholder="Name">
</div>
<div class="actions">
<input type="submit" value="Submit">
</div>
<input value="4626442">
</form>
You can only apply CSS to a sibling that follows the element that's validated. Therefore I moved the input element with value 4625585 to the top in the form.
If you don't have access to the HTML, you will need javascript.
input[value="4625585"] ~ .wForm {
background: red;
}
<form>
<input value="4625585">
<div id="tfa_6" class="wForm">
<input type="text" placeholder="Name">
</div>
<div class="actions">
<input type="submit" value="Submit">
</div>
</form>
The issue was commented on and answered in a deleted threat. This short answer is "no, it can't be done".
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
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have included a jfiddle below. I tried setting my css code to input[type=text] so that the styling wouln't affect the submit and reset button, but something is wrong and I'm not sure what.
http://jsfiddle.net/SYcP2/
<link css="" href="common/css/complianceCSS.css" media="screen" rel="stylesheet" type="text/css" />
<link css="" href="../privacy/internal/css/turquoise.css" media="screen" rel="stylesheet" type="text/css" />
<h1 class="allpages">Questions or Concerns about Compliance Issues?</h1>
<h3>We welcome all compliments and constructive criticism!</h3>
<form class="webform" action="http://hsc.unm.edu/scripts/cfmailform/cfmailer.cfm" method="post">
<!--Required hidden operators-->
<input name="recipient" type="hidden" value="bfloran#salud.unm.edu" />
<input name="subject" type="hidden" value="HSC Compliance Office Email Form" />
<input type="hidden" name="cc" value="mgwilson#salud.unm.edu" />
<input name="redirect" type="hidden" value="http://hsc.unm.edu/admin/compliance/ThankYOU.html" /> <!-- Field validation for the user -->
<label for "name">Your Name (optional):</label>
<input name="name" type="text" id="name" value="" /><br />
<label for "name">Your E-mail (Optional):</label>
<input name="mail" type="text" value="" /><br>
<label for "name">Comment:</label>
<textarea name="comment" value="" ></textarea>
<p>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
You were close: input[type="text"]
Updated fiddle