Is there any way to allow a link/anchor within an input field so that whatever text is in the field is ALSO clickable and actionable?
This is unfortunately not possible in HTML 4 or below. Even with HTML5 which has several new INPUT TYPEs, including URL, it only does validation and has some other useful functions, but won't give you want you want.
You might look for some jQuery plugins that can help you do this, most use the same principals behind Rich Text or other online/web-based HTML WYSIWYG editors. I've had trouble locating them myself.
These 3 situations (that I can think of right now) are pretty much what you will face natively with HTML4 or below, as text in an actual HTML4 INPUT textbox is pure text. It is not html and therefore NOT clickable. Here are some variations:
The INPUT tag's VALUE attribute, also referenced as the corresponding DOM object's "value" property (which is basically what you've been doing, and the most you can hope for, if you decide that you MUST have the text that's ACTUALLY inside the textbox (because the text inside the textbox is the VALUE attribute, as I have it with "http://yahoo.com" in this example):
<input id="myTxtbox" type="text" value="http://yahoo.com">
where the INPUT's VALUE = "http://yahoo.com", which you can retrieve with:
in pure javascript:
document.getElementById("myTxtbox").value
in jQuery:
$("myTxtBox").val()
When your link/url is the text in between the <INPUT> and </INPUT>, i.e. the text/innerText of the textbox. This is useless for your question/scenario since it's not clickable, and more importantly NOT INSIDE the textbox. However, someone might want to use this to retrieve any text that you may be using as a label (if you're not using the <label> tag itself already that is):
<input id="myTxtbox" type="text">
http://yahoo.com
</input>
The textbox's text/innerText is NOT an attribute here, only a DOM object property, but can still be retrieved:
pure javascript:
document.getElementById("myTxtbox").innerText
jQuery:
$("myTxtBox").text() -- you would use this to capure any text that you may be using as a label (if you're not using the tag).
The result being: http://yahoo.com
When your link/url is the form of an ANCHOR (<A>) with an HREF to your url (and visible link text) in between the <INPUT> and </INPUT>, i.e. the innerHTML of the textbox. This is getting a bit closer to what you want, as the link will appear as, and function as an actual link. However, it will NOT be inside of the textbox. It will be along side it as in example #2. Again, as stated in example #1, you CANNOT have actual working HTML, and therefore a working 'link' inside of a textbox:
<input id="myTxtbox" type="text">
<a href="http://yahoo.com">
http://yahoo.com
</a>
</input>
Once again, similarly to example #2, the textbox's innerHTML is NOT an attribute here, only a DOM object property, but can still be retrieved:
pure javascript:
document.getElementById("myTxtbox").innerHTML
jQuery:
$("myTxtBox").html()
The result being: http://yahoo.com
Related
Hello any accessibility gurus,
I want to have this button element, when tabbed on, would trigger the screen read of an input element instead.
I tried pointing the aria-labelledby from the button to the input, to have the input's aria-label being read out. But the button still reads out its own description, when tabbed on.
<fieldset>
<input type="radio" id="inputid" aria-label="read me">
<button aria-labelledby="inputid">don't read me</button>
</fieldset>
Is there a way to read another element's content?
Thank you,
2022-12-06 Edit:
Following Andy's comment, the input element is only visually hidden, so it was moved offscreen with css left: -10000px.
I believe aria-labelledby is not used according to the standards, which might explain undefined behaviour.
The Accessible Name and Description, step C mentions the following:
If the embedded control has role textbox, return its value.
That means that if an <input>, which has implicit role textbox, is used as part of an accessible name, not its label, but its value is used as the name.
Further, the ARIA standard on aria-labelledby reads:
If the interface is such that it is not possible to have a visible label on the screen, authors SHOULD use aria-label […]
The main purpose of aria-labelleby is to refer to part of the visible contents of an element like a <form> to label it. Most commonly, this would be a heading like <h2>.
The use case of this question is currently unclear to me. The example provided does not make sense with a single radio input.
If the <input> is completely hidden, visually and from assistive technology, why is it there in the first place? <input type="hidden"> would be the more correct input to use if the form data is needed
If it’s only hidden visually, both the button and the input can be focussed, which is terribly confusing. Does the input appear on screen once it receives focus?
I'm using the AngularDart to build a web project. I need to make the website accessible, so I use WAVE (web accessibility evaluation tool) to run evaluations for my webpage. The label above the input area shows "A form label is present, but does not contain any content."
I know that I need to add the attribute "for=id_of_input" to the label tag, but the input tag is customized and the IntelliJ shows "invalid id reference" when I do something like this:
<label for="some_id"> username: </label>
<customized-input id="some_id"></customized-input>
So How could I deal with this situation?
There is another approach that might work for you: Simply place the <label> around the <input>. Then you can skip the for and even the id attribute. If it behaves in AngularDart, it should pass in WAVE as well.
I have an order form and I need to do something like this:
<input id="myInput" type="text" name="myInput" value='<time datetime="2015-01-01" itemprop="startDate">1.1.2015</time>' class="width-100" readonly />
but in the browser, in the input area, where should be displayed just: 1.1.2015, as I supposed, is displayed the whole time tag: <time datetime="2015-01-01" itemprop="startDate">1.1.2015</time>
...idk why, and I can't figure out how to make this work.
The time tag in input's value is based on date selected from DB and returned by function, like: return '<time datetime="'.date('Y-m-d', strtotime($from)).'" itemprop="startDate">'.date('j.n.Y', strtotime($from)).'</time>';
Any advice would be helpful. Thanks
You can write almost anything you want inside an HTML attribute, as long as you encode it properly (e.g. < instead of <, " instead of ", etc.). All decent programming languages provide built-in methods to take care of the dirty details. Whether those values are valid, meaningful or useful in the context of the precise attribute is a different thing.
<input> elements are designed to hold plain text. Whatever you write into the value attribute will be rendered to the user as-is. If you type HTML tags, you'll display HTML code, nothing else.
If you want to send form data to the server, you can simply use form fields, as you are already doing. The missing bit is that form fields do not need to be visible. There's a specific control for hidden data: <input type="hidden">. From MDN reference:
hidden: A control that is not displayed, but whose value is submitted to the server.
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>
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.