I have studied that when making a form using HTML , you want to create a Text Field , you use the following code :
<Input type="text" name = "-Name_of_Text_Field-">
So this will create a text box on the web page whose value will be stored in whatever name of the text field that you have specified , right ?
My question is , we know that a variable is a named memory location . So where actually is this location ? Is it on the web page itself or where ?
I haven't been taught this at my school and am very interested to learn more .
Yes, the code <Input type="text" name = "-Name_of_Text_Field-"> will create a text input box. But there is no variable created. Typically what happens is that you use a server side script, like PHP, to pull the value when the form is submitted.
Related
What's the best/recommended way to indicate a form field will have a particular default value if you don't fill it out? I'm especially thinking about fields that are dynamic based on other fields, and wanting it to be correctly accessible.
Think a URL slug. When creating an account, if you fill the field out then that's fine. If you don't, a value will be generated based on your username. But it won't be the same as your username, just generated from it.
Actually setting the form field seems bad because it makes it less obvious you can change it yourself.
I'm not sure if placeholder text works here, but I assume not. I could do an aria-labelledby pointing to something that says "Default value: xyz" but I'm not sure if that will work, or how well it will be understood by screen readers - especially if it's changing automatically.
Cheers
The best way to do this is to populate the input and expose the fact that it was automatically filled in via the label as an extra bit of information.
Labels on inputs are read once you focus the related input.
For this reason we can generate labels "on the fly" to contain whatever we want.
As such the best option here would be to generate the label on blur of the first input that the second input depends on.
Within the label we add the instructions that explain why this input is already filled in.
We then auto populate the second input based on the input of the first.
In the below example I have appended "URL" to the first input value in order to simulate some sort of transformation from username to URL.
I also remove the explanation in parenthesis if the user has changed the second input value.
$('#iUsername, #iUserURL').on('blur', function(){
var ElUserName = $('#iUsername');
var ElUserURL = $('#iUserURL');
if(ElUserURL.val() == ""){
ElUserURL.val(ElUserName.val() + "URL");
$('label[for="iUserURL"]').text("user url (you can change this if you want, we have set it as " + $('#iUsername').val() + "URL)");
}else if(ElUserURL.val() != ElUserName.val() + "URL"){
$('label[for="iUserURL"]').text("user url");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="iUsername">User Name</label><br/>
<input id="iUsername" /><br/>
<hr/>
<label for="iUserURL">User URL</label><br/>
<input id="iUserURL" /><br/>
<hr/>
<label for="itest">I have added this third input just so you have something to tab too, it does not add anything to the fiddle</label><br/>
<input id="itest" />
Within the Moodle (v. 3.5.7) Atto editor (using both Chrome and Firefox) I've been trying to assign an ID to a particular row class, "span9". My ultimate objective is to assign this a unique ID and reference this element via jquery so as to append another element within it.
The ISSUE is that once I add an ID (id="checklist01") and click save, the ID simply does not appear in the DOM, and seems to not exist. When I re-enter the atto editor however, voila, there it is just sitting there. So it's NOT being removed completely... just not expressed somehow?
I have 2 screenshots linked below showing (1) the editor view, with the element and assigned ID highlighted, and (2) a screenshot of the DOM once the changes have been saved, with that same area highlighted, without the assigned ID.
Screenshots of ID Missing from DOM
Bootstrap ver. 4
So far I've tried switching the placement of the id in the atto editor (class coming first vs second after ); tried to add a "span" in front of the id (for some reason, I was desperate); and really just searched all over for someone who has encountered something similar.
I'm not sure how much help the html will provide, but here it is:
<div class="row-fluid colored">
<div class="iconbox span3">
h4>Your Completion Status (%)</h4>
</div>
<div id="checklist01" class="span9">
</div>
</div>
I found the reason for the removal of id attributes.
id attributes are removed because "Checklist" activity used safe HTML function of Moodle. If you want to access id attributes of description HTML follow below steps.
Go to mod\checklist\locallib.php file.
Then search formatted_intro() function (which is around line number 880).
In that function they used Moodle's format_text() function to return description text.
In that function, they have used 3 parameters.
string $text The text to be formatted.
int $format Identifier of the text format to be used
object/array $options text formatting options
Replace
$opts = array('trusted' => $CFG->enabletrusttext);
to
$opts = array('trusted' => $CFG->enabletrusttext,'allowid'=>true);
Then save your file and check. By following the above steps you can use id attributes.
I have a custom Visual Force page that on load has a name field that is supposed to have {Auto} printed inside the input text box that the user can delete or leave or not. I have been using a html-placeholder however the text just disappears and is gray.
My VF inputfield:
<apex:inputfield required="true"
value="{!EventPackageRevenueBreakdown__c.Name}" html-placeholder="{!Auto}"></apex:inputfield>
What it looks like with that code:
What I need it to look like (notice the cursor is after the closing scope)
Thanks in advance I'm still very new to this!
I suggest you to set Name field in controller with '{Auto}' value.
The placeholder attribute will disappear when there is a value in the field, what you want is to actually set the VALUE of the field to {Auto}.
Try this:
If you want it to automatically clear the field if a user clicks into it, you could add some javascript to handle that.
Or How does Firefox determine where the password/username goes?
If I change name, id, title, class of an input element Firefox keeps filling it with password or email.
If I understand Firefox's source code correctly, the browser first looks for password fields in forms. If form contains more than 3 password fields, the autofill function ignores that form.
After 1 to 3 password fields are found, the browser looks for login field. The browser does a backward search starting from first password field and assumes that the login field is the first found field of the type text or email or url or tel or number.
Next step depends if we check the forms on page load or when submitting the form.
If we check during page load and there is a login field and exactly ONE password field, the case is simple and the browser can fill out the form.
Other cases (form submit or more than 1 password field) do some “smart” logic to determine which password field contains new password and which one the old password, probably to update stored passwords). If you're interested in details, download the source code and open toolkit/components/passwordmgr/nsLoginManager.js file. Functions to check are _fillForm, _getFormFields and _getPasswordFields.
Just to summarize, Firefox doesn't need any ID, name or class attributes to guess which field is login or password. It just relies on types and the order of form fields.
I tried a simple solution that is working so far. Create 2 hidden fields and the browser will autofill those.
<input type="text" style="display: none">
<input type="password" style="display: none">
Looks like using a disabled input text between login and password inputs does the trick well :
<input type="text" disabled="disabled" style="display:none">
Are those the only two elements on the form? Firefox is likely storing the structure of the form (two input boxes, one flagged as normal, one flagged as password) and filling in saved information without respect to the ID of the input elements.
Try this: add an extra input element to the form and see what happens. Either Firefox will not fill in anything, or you'll find your name in the first field and the password field filled in, while the second input element is blank.
There was a question previously on how to show hints in a text field (html form field), which clears automatically when the user clicks on the field under consideration. As in, when the field gets focus, the hint displayed inside the form gets cleared without the user having to manually delete the characters.
The solution given (and it works perfectly) -
<input onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
Now my question is, how do you format the text that is displayed as the hint (in this case "search"). By formatting, i would want it to be in a certain color and font type.
I can do this to the other fields, which do not have this preloaded hint in it, by using css-
color:#123123; font-family:calibri;
Thanks!
You're asking about styling the content (value) of an input element.
You can use regular CSS for this:
input {
color:#123123;
font-family:Calibri;
}
Working example: http://jsfiddle.net/fxxp4/