is there any special input type in HTML that is designed to only display values, based on say, other input? When nobody is allowed to write into it. Or is a disabled text box the best option?
<input type="text" readonly />
The readonly attribute does your magic.
Nowadays its very easy to remove readonly attribute on browser. I suggested you to use label or span and write few lines of css codes for that label element to become look like input box.
<label>test value</label>
<style>
label {
padding:3px;
border:1px solid black;
width:200px;
}
</style>
use the readonly attribute, or use javascript to update the contents of a div
In HTML5 drafts, the output element exists for such purposes. I don’t think there’s much point in using it, though, since the same goal can be achieved in other ways.
In order to just display data, use any normal HTML element, like p or div or span.
If the data needs to be transmitted along the form data, put it into a hidden element, <input type=hidden>.
You can of course combine the two if needed: separately display the data and include it into the form data set.
Related
I want to avoid using id for every form element. But I also want to keep the table layout.
<label> works without the id when you put the input inside the label:
<label>Something: <input type="text" ... /> </label>
But now it's sudenly pretty hard to make inputs or the label contents float to sides to make it look like a table. I've been trying the margin: auto on inputs. Without any success.
What do you sugest?
You can use table and create a class with a specific width for those columns that contain the labels.
form.myform table tr td.label {
width:100px;
}
Check this link
I suggest using correct markup with ID, if you don't want to write ID for each element, create a simple jQuery or JS function which assigns for attribute for label and equivalent id for input field.
I suggest, that you shouldn't put input element inside label element. Label has a attribute called "for" so you should do:
<table>
<tr>
<td><label for="myInput"></label> <input id="myInput"/></td>
</tr>
</table>
If you don't want to use tables for alignment, you could also use sections with divs to build a table-like layout.
I'm currently wondering when to use clean text (not wrapped inside eg. <p> tags) in html documents.
i have a input fiels which i want some text before like:
<p>Age:</p> <input type="text" name="age">
But using the p tags as above will result in a linebreak between the two. However if I leave out the p tags this problem is no more.
My question is then wether it is OK to leave out the tags, and what in is interpreted as,
Thanks
You are looking for the <label> tag
Though there are many solutions as Webarto said you can style the p tag, or you can use span or label...People usually use label..I'll tell you why..
In good web designing principles one thing comes very important..
If you have some checkbox, or radiobutton, or textfield anything in your form then it should be selected just by clicking on the label assosiated with it..User should not search for the
radiobutton and then click, as it is very small, it should be triggered just by clicking the label, user should not search for the textfield and then click inside it and then type..
<label for="id of input element"> attribute provides that function
Hence people prefer
<label>
The p element means in principle a paragraph, though HTML5 (and common practice) takes a liberal position on this: a “paragraph” is any block of text. But even under that interpretation, there is no reason to use p markup for a field label, as you do not want the label to appear in a block of its own. You might use p markup around the label and the corresponding input field, as in
<p><label for=age>Age:</label> <input type=text name=age id=age></p>
The reason is that you probably want to present such constructs as blocks, not consecutively all on one line. But then you need to remember that p markup implies default margins, corresponding to an empty line above and below. You can remove then using CSS, but a simpler and somewhat more logical approach is perhaps to use div, which indicates a block but with no default margins;
<div><label for=age>Age:</label> <input type=text name=age id=age></div>
How can I get HTML to work in the value of the input field ? If you include HTML in the value, it appears as pure text. Is there a way to do something like this?
<input type='text' value='<b>tekst</b>'></input>
So the the output is:
tekst
instead of
<b>tekst</b>
I think that was bad example... I want every appropriate HTML tag to work. If i want to include an image, the image appears in the input, if i want to add a tag ... the text should appear as a link linked.
I'm not sure from your question whether you are trying to make the value contain HTML, or whether you want to apply HTML to something inside the input.
If you want to be able to set the value to some HTML, like <input value="<b>Some HTML</b>"> where the value will actually show the HTML, you need to encode the HTML brackets like <input value="<b>Some text<b/>">. There are functions available to do this for you automatically in most scripting languages (e.g. htmlentities() in PHP).
If you want to apply HTML to the input value, short answer is... you can't. If you want formatting on there, you could use the contentEditable attribute in HTML5 which lets you just edit-in-place (think Flickr headers).
If you just want a standard input field to be styled, you can just use CSS like the other answers suggested.
You have to encode all the HTML you want in the value and paste it in the input value.
If you encode this:
"http://sansoftmax.blogspot.com/"
It will look like this:
"http://sansoftmax.blogspot.com/"
In input:
value=""http://sansoftmax.blogspot.com/""
Online Html Encoder/Decoder
You can try to decode you entities from your postvalue.
In PHP you can do this with html_entity_decode();
I don't think you can put HTML inside a text field and have it interpreted as HTML instead of as text in the field.
To accomplish what you want you'll have to use CSS. An in-line example to bold the text as you cited in your example:
<input type="text" style="font-weight: bold;" value="tekst" />
Try CSS:
input[type=text] {
font-weight: bold;
}
Is it possible to change the properties of a text field when it's selected/active (i.e. being typed in). I'd like to simply change the border colour but I haven't found a thing about actually doing it.
I tried using :active but that only works when the mouse is pressed (obviously I guess)
the selector you want is called :focus
To change the border of an input field when it's selected/active, use :focus
Example below:
HTML:
<input type="text" id="ageField" name="age" />
CSS:
#ageField:focus {
border-color: #F00;
}
Explanation / Details
# W3Schools CSS:focus Selector
You are looking for the onFocus/onBlur HTML elements. With these you can use Javascript to modify the colors/style tags.
onFocus/onBlur tutorial
I have an HTML form with radio buttons, check boxes, text fields and drop down lists.
Since I want user to fill everything in my form, none of the radio buttons and check boxes are checked and the text fields are empty.
I would like to write a CSS file that will fill the form with answers (I don't want to change my HTML file).
Is this possible ?
I would appreciate an example or any other idea ?
Thanks !
No, it isn't possible. CSS is for style, not markup, and changing the contents of an input field requires modification of the markup.
It sounds like you might want to consider JavaScript, which can be used to alter the contents of any element, including form elements.
Javascript is your best bet. If you want to fill in -sample- answers, however, like 'First Name' in the text area what would be labelled "First Name: " you can do something like <input type='text' value='First Name' name='emailForm'> and the value attribute will be filled in when the page loads.
You can use jQuery to accomplish what you want quite easily, using CSS-style syntax.
Here's a sample form:
<form ...>
<input name="firstName" />
<input name="lastName" />
</form>
And corresponding jQuery/JavaScript:
$(function () {
$("input[name=firstName]").val("John");
$("input[name=lastName]").val("Doe");
});
Should be easy enough to extend to a larger and more complex form. You can easily use classes or ids on the elements and in the jQuery selectors, as well.
CSS is for designing and styling the webpage. Although its capabilities have been exploited to pull of many tricks it is not a fix-all solution. What you need to do is pull the data you need to fill and put it in your fields.
You can do this two ways:
Use a server side language like PHP/ASP.Net to pre-fill this information.
Use Javascript/Jquery/MooTools or some other framework to fill it on the client-side, picking up the data from the server.
If the information is static then it is very easy, because you can just put this info as a part of the HTML content itself.
If this answer doesn't work for you, add more information to your question.