I'm writing a basic text generator and in some of the fields, I needed to allow the user to write more than a single line. I know that doesn't allow multiple lines so I had to use but I was wondering if there was a benefit to using <input>.
Thanks in advance!
There is a large number of functional differences between input and textarea elements. For example, for input, you can specify the required pattern of input data or to provide a set of author-supplied alternatives in addition to letting the use enter his own choice.
However, if you need to let the user enter an unlimited number of input lines and to type a long piece of text in a reasonable way, you more or less need to switch from input to textarea (or to a contenteditable block).
On the other hand, if the input consists of separate lines, like a postal address or a list on entries, one entry per line, rather than freely flowing text, input elements may be more practical.
Related
I need to perform a full PDF print of a website with a populated questionnaire. It's accessed via Chrome, but some fields contain extensive answers and they are partially cut as they do not fit within the line. The text can be extracted via copying, but it's not fully visible in a print (I'm sorry, I cannot provide a full picture).
To make the full contents visible in the print, I would like to break it into several lines. I heard that it could be done by adding the "word-wrap: break-word" or "overflow-wrap: break-word" properties, bit it appears that it's an Input field and, from what I heard, such fields are not breakable and I would need to change it to Textarea.
However, when I change the field type to Textarea, the contents of the field disappear.
Is there any relatively simple way to somehow make this field breakable and show full text which was previously provided as an input?
textarea does not have a title attribute. That's why the text disapears. Try to insert the text like this: <textarea>Text should be here</textarea>.
I have an input field, at the end of which i've created a character counter:
The problem is that now, it is possible to type beneath the counter which is no good:
I would like the typing area to be restricted a certain distance before the end of the input field, something like this:
I am aware of maxlenght but since the letters have different lengths i.e. you can fit 183 "i" but only 57 "W", which would make for a really unintuitive typing experience, if your typing is cut off at the middle of the field.
The two possible solutions that occur to me.
1.
Simply shortening the input and positioning the counter next to the input, then styling a common parent element to look like the input. This is the more simple and less error prone solution.
2.
This way is a bit more complicated, but basically what you would do is create a hidden element somewhere (NB not display: none;) with the same font size/weight/family and attach a keydown event handler to the input field.
In this handler you copy the contents on the input to the hidden element, measure the width in pixels and compare that to your input. If the difference is too small, you return false in your input handler, making sure you're not preventing the user from pressing delete or backspace first.
It should be noted however that this method is pretty difficult to get right and I would consider it to be the "dirty" solution.
I have an html number input with text align set to center. I want to center text above and below so that it lines up with the text in the input field; however, some browsers add up and down arrows that shift the center of the text in the input field. Is there a way for me to calculate by how much the center is shifted at runtime?
An <input type="number"> element is expected to be rendered differently in different browsers and with different settings. It is expected to provide some user interface for entering a number, and only a number, with the constraints specified by other attributes of the elements. Thus, you cannot know what it looks like or control that, unless a browser provides an API for that.
So if you wish to align the number entered by the user up with some other elements, use <input type="text"> instead and perform checks on the data format with the pattern attribute and/or JavaScript (in addition to server-side checks, of course).
In HTML forms input fields and their captions are declared as label and input tags, but which tags should be used for displaying the same data?
I'm considering either dl, dt, dd or label and disabled input tags, but both solutions don't feel right.
Of course there are many ways to "somehow" display the data, but I was wondering if there's a preferred way to do this.
Bear in mind that label/input is just a user-adjustable variation of the notion of key/value (or name/value) pairs. What you want is merely something that represents a key (label) and value (text) in such a way that the two can be distinguished from each other. The input performs the "value" function visually, and forces the user to regard the label as the name of the value. Without the visual clue of the input you can still make the name/value relationship obvious by bolding the name, putting it in a different color, different font, spacing, etc.
Even if you were to use <dd> and <dt> and the like, you would still need to make sure the name/value distinction was visually distinctive. (Especially if you were using a reset stylesheet that canceled out any inherent browser-generated difference between the tags.)
I think this depends on what the data is and how you'd describe it.
If you're showing a list of titles with associated reference data then a definition list seems to fit the bill. (Since it retains the semantic link between title and reference data).
This will be similar in how the label is directly linked to your form fields using the for attribute, making it not just about visual reference but also about data connection and relation.
I usually ask myself the question, "What am I trying to say here?" and "How do my data relate to one another".
I have a bunch of elements (divs) and they represent items. I can delete them by clicking a link and its done through ajax. I had the divs store the value in id however it appears that even though it does work the standard says id names must start with a letter. So i could start it with a letter and remove it when i use ajax or i can store the value another way.
What are ways i can store values in html? I don't think inputs are legal outside of forms but i am rethinking what are good ways to store values.
Best way is to use the new HTML 5 spec to store data in the data-[name] in the div elements
ie
<div data-yourfield="value">
Text
</div>
Then using jQuery find the divs with the selector (reference http://api.jquery.com/category/selectors/)
div[data-yourField=""]
You can store it as text inside the div if you like. You also can use inputs, just add the form tag around everything. Just because it's a form doesn't mean it has to "submit". Inputs or textboxes would probably be the best way to store them actually.