Basic HTML Question: My text input field stretches across the entire webpage and I want to center it and make it look a bit more friendly.
I'm in Wordpress and am editing the HTML. Here is what I currently have:
<input name="FNAME" required="" type="text" placeholder="First Name" maxlength="5"/></p>
Is there a difference if I use maxlength=, maxlength:, maxlength:50px etc?
I know this is basic, but i've been playing around with this for a while now.
Thanks so much!
maxlength is an HTML input attribute which determines the maximum number of characters which can be entered into the input. maxlength=50 means that the user can't enter more than 50 characters.
What you want is CSS, which controls styling. The following would make the input 50% width of its containing element and center it within that element.
input {
display: block;
width: 50%;
margin: 0 auto;
}
max-width sets the maximum width that an element can ever be. It overrides width. It's especially useful in setting up responsive designs. In general though, if you merely want to set the width of an element, use width.
Related
I have a textarea that gets processed into an image. I need to force the user to type in a specific area including formatting and returns. The box should limit users from overflowing the box How can this be done?
I'm using cakephp as a framework and can therefore use html, css, php or js to accomplish this.
This is the textarea element I'm working with:
<textarea name="ch_text" id="ch_text" rows="8" tabindex="20"></textarea>
I tried adding a cols property, which didn't work. I tried setting wrap="true", which didn't work either. Is there a way to specify a height/width property that can't be exceeded?
The way I have usually seen this done is by enforcing a character or word limit. This can be done by using variables in the HTML code!
A combination of setting the maxlength on the element and then in CSS make sure to give a height and width and set resize to none.
textarea {
resize: none;
height: 100px;
width: 200px;
}
<textarea maxlength="10"></textarea>
I'm setting up a simple HTML interface with <input type="number"> in it. The problem is that the <input> element is taking too much space (It takes about 10 columns, but I only need two columns).
Because the input will never be more than two digits, I want to define as size of 2 characters for the <input type="number"> element.
However the width attribute only works with <input type="image">, and alternatively the size attribute doesn't work with the type attribute set as number. What other alternatives are there? (preferably HTML, or maybe CSS, nothing else)
note:
sounds like there is a css solution, as given below, however just to be more clear, I must add this question is not about setting a max/min value to the number type of input element, rather the width. CSS, as given below, solved the problem, although I haven't seen an HTML solution, but that's fine enough for me. Thanks
input[type="number"] {
width: 2.5em;
}
<input type="number">
em can be used to style the width of elements based on the font size. The only problem is that you will have to make the element wider than two characters because the up and down arrows needs some space inside of the input box as well. Try readjusting the width to 2em instead of 2.5em and you will see what I mean.
width should work. At least it works here on Firefox in the following snippet:
input[type=number] {
background: #fc9;
width: 30px;
}
<form method="post">
<input type="number" name="x" value="23"/>
</form>
Ok, its pretty simple. all you have to use CSS to define a width.
<input type="number" class="form-control">
then
.form-control{
display: block;
width: 20%; //for two column
}
and use some more css styles to make it gorgeous.
Say I have an input element that is four digits. I want to make sure the input element visually presents that fact without ambiguity. However I find that most browsers seem to present size=4 as size=6. Why? And how do I achieve what I want?
<input type=text value=123456 size=4>
I don't quite know why size attribute is so inaccurate, but if I need to have a good fit, I'll use 1ch per character and 1px of padding. ch is a unit of measurement that is about the width of a zero. It's relative to the font used so it varies but it's very accurate if used for measuring how much space characters actually use.
It just occured to me if you want the actual character spaces to be 6 or less, you'll need to use maxlength. So a combination of 6ch width and the maxlength='6' is perfect.
Just found this article which explains why size is the way it is. Apparently, size is based on font-size,
both the font-size property (12 pt vs. 14 pt) and the relative size of the font being used (Arial vs.Helvetica`, for example).
Read more: http://html.com/attributes/input-size/#ixzz4VyvrKPLm
SNIPPET
input {
width: 6ch;
padding: 1px;
}
<input type='text' value='123456'>
<input type='text' maxlength='6' value='123456'>
You can use maxlength attribute to set a pre-defined size to allow that many characters for an input.
If you want it to be interactive, using JS might be overkill for this, but the following adapts the input text-box size based on the input.
<body onload="len()">
<input id="input" type="text" value=123456 size=4 onblur="len()">
<script>
function len() {
var n = document.getElementById("input").value.length;
document.getElementById("input").size = n;
}
</script>
input {
box-sizing: content-box;
width: 4ch;
}
I have a textarea which is contained in a div as I have jquery hint and wanted to use opacity without changing the border.
When I am typing in the text field and it goes beyond the container I cannot see what I am typing. How do I make the div follow the text.
Textfield:
<label><div id="name">
<textarea name="name" type="text" id="name" title="Enter Message Here" rows=9 cols=60 maxlength="2000"></textarea>
</label>
Styles:
#name {
border: 1px solid #c810ca;
width: 270px;
height:159px;
}
Try to improve basic things:
Don't use any id name more than once (you have div#name and textarea#name, it can cause problems)
Close tags in correct order
Textarea doesn't support text attribute
If it won't solve you problem, please give some more details - I've tested your code and I can see what I'm typing. If you mean to make div's height flexible (although textarea has constant height, it is still resizeable), remove the height and replace it by min-height.
I looked online for examples of implementation of the form using DIVs and all I see is pretty simple one column forms. I have some pretty complicated forms, here is a picture of one:
http://img835.imageshack.us/img835/8292/formn.jpg
It is easy to make it work with table (which I do), the only problem I have is that sometimes I need to not display some of the choices and move the values up one row to avoid gaps.
I started making some forms using divs, but they fall apart when I change the browser window size and it is not easy to align things.
This topic is helpful:
Is it bad design to use table tags when displaying forms in html?
but it doesn't address some of the concerns I have.
What would you propose as a solution? I can dynamically delete/insert values in the table or try to do the DIVs.
I would go the div route. As long as you're careful of your widths when you apply floats, it's actually pretty straightforward to get the layouts to work properly in different screen resolutions.
Here are a few rules:
Set a max width on your form or your form's wrapper element. If you want to float elements on one row make sure their width's added together does not exceed this width.
If you are adding horizontal padding/margins to your floated elements remember that these add to the total width of the element.
Avoid mixing percentage widths with pixel padding and margins. Apply the percentage width to a parent element and the pixel padding/margins to a child element.
Use clearing elements between your rows of elements to keep everything in line.
As to the markup, you can use the form elements along with CSS to create a semantic structure:
<fieldset>
<legend>Fieldset Title</legend>
<label for="input1">Input 1:</label>
<span><input type="text" id="input1" name="input1"/></span>
<label for="input2">Input 2:</label>
<span><input type="text" id="input2" name="input2"/></span>
<br/>
<label for="input3">Input 3:</label>
<span><input type="text" id="input3" name="input3"/></span>
<label for="input4">Input 4:</label>
<span><input type="text" id="input4" name="input4"/></span>
</fieldset>
And the CSS:
fieldset {
padding: 20px 0;
width: 600px;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
background: black;
color: white;
}
label, span{
float: left;
width: 150px;
}
input {
width: 120px;
}
br {
clear: both;
}
You can see the result here.
If it is a fixed-width table, it's trivial to lay out with divs and floats. Just set each width to exactly what you want.
For a liquid-layout table—and liquid layout is in general highly desirable—it is much harder to arrange a form without table-style-display, because float and position do not readily allow for calculations like “this cell is half the remaining width of the parent, after the fixed-width labels have been allocated”.
So in cases like this, which certainly includes the kind of two-column form you posted, the table-* CSS display values are your only possibility. If you are aiming only at IE8 and the other modern browsers, you can use divs and set display: table-row et al in the stylesheet. However for compatibility with IE6-7 and other older/mobile/niche browsers, you will have to use actual <table>/<tr>/<td> elements, as only the modern browsers support table-CSS independently of the table-elements.
There is no shame in this. A form is kind-of semi-tabular anyway and there is no practical accessibility disadvantage because the page content remains ordered appropriately.
Note: for liquid-layout forms you also have the issue of sizing input fields to match the parent element. input { width: 100%; } almost does it, but not quite, because the width is not including the border or padding that inputs get by default. You can use CSS3 box-sizing and the browser-specific versions of it to get around that for modern browsers, but if you want it to line up exactly to the pixel on IE6-7 too you would have to use padding on the parent elements equal to the border/padding on the child input field.
General information is some kind of list, key > value list to be exact - <dl /> would be probably the best structure for it
Issues values is a table,
Ratings is a table,
Both Redemption and Indicators are lists - unordered lists <ul />