Labels Causing Text Boxes to Deselect - html

I am learning how to make forms and made this for practice. When I have labels out it and try to click into any of the form elements, it selects the previous one. For example, if I click into the password input box, it sends me to the username input box. When I remove the labels the bug goes away. I'm pretty sure labels aren't supposed to do this. The console isn't showing any errors so I'm confused to why this is acting up.
Here is my code:
<form action="">
<fieldset>
<label>username<label>
<input type="text" id="userInput"/>
<label>password<label>
<input type="password" id="passwordInput"/>
<label>Hidden<label>
<input type="hidden" id="hiddenInput" value="I can't tell you"/>
<label>Text Area<label>
<textArea id="areaInput" rows="10" cols="40">
This is a big area with lots of text.
</textArea>
<input type="button" onClick="" value="submit"/>
<fieldset>
<form>

Looks like you are not closing your label tags, so you are making another label. You need to close the <label> by using </label> - just a typo!

You're not closing out your <label> tag. Use the / slash on the closing tag:
<label>username</label>

Related

Problem moving checkbox and the text to the left

I need to modify an existing codes. That is to add a checkbox and texts underneath a reset password field (see the image). I have to keep the existing look. The existing codes are wrapped between div align=center tags and I'm not allowed to change this because I have to make sure this page looks the same to all other pages, all form fields and texts are centered.
This is just a front end form modification and I'm not good with css so I'm desperately need help, thank you!!!
NOTE: Not sure how to include my codes here so I get rid of the < > signs from the codes
existing code:
<h4>Enter your NEW password here</h4>
<form name="pswreset" id="pswreset" action="pswreset_action.cfm" method="post">
<fieldset>
<input type="password" placeholder="Your New Password" name="pwd" tabindex="7" id="psw-repeat" required>
</fieldset>
<fieldset>
<input type="checkbox" id="showpsw"/> show password
</fieldset>
<fieldset>
<button>SUBMIT</button>
</fieldset>
</form>

Enable autocomplete in HTML form using <script>?

I got a form where I'm not allowed to edit the form directly. However I'm able to add etc. Is it possible to add autocomplete="off"-attribute without editing directly into the form?
This is my form:
<form action="/action_page.php">
<input type="text" name="firstname">
<input type="submit" value="Submit">
</form>
Hope that was understandable.
I suggest you to use <button> for the submit instead of <input> and give the tag an id .
Try this javascript:
function off_ac(){
document.getElementById('text_input').autocomplete = 'off';
}
<form action="/action_page.php">
<input id="text_input" type="text" name="firstname">
<input type="submit" value="Submit">
</form>
Autocomplete will be overruled by most browsers. A workaround is to change the text Field to text area. Set it to one row high and x letter Width, and it will look almost like a text Field.

HTML Submit button don't work

I recently started HTML and made my first Website. I made bunch of lines of codes, and the last line is: <input type="submit" name="register" value="Register" action="Registered.html">. I wanted to this submit button named as "Register" to get me to the my "Registered.html" file but something isn't right. The button shows up, and it's valued as "Register" but `action="Registered.html" doesn't work. I hope you understand me, if you can, fix this for me.
The form element takes the action attribute, not the input:
<form action="Registered.html">
<input type="submit" name="register" value="Register">
</form>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
notice the action is at the form..
refer https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit
In general form elements are used to send data to a server. It wraps around the elements which specifies the data, input or button elements, for instance. If you add a name and a value attribute to your input and button elements, you will send this name-value-pair to your server.
If you don’t need to send any (additional) data to your server, just use anchor elements:
Register
<form>
<input type="submit" formaction="Registered.html" value="Register">
</form>
The formaction attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.

Do not show previous input in html textarea

This question is very basic and simple.
How can I make it where the textarea will not show previous input.
<form action="" method="post">
<textarea> Person's input </textarea>
<input type="submit" name="submit" value="post">
</form>
After using the textarea a few times I started noticing the previous input I've entered. Is there any way to get rid of that?
You can set the autocomplete attribute of an input tag to off to prevent the browser from showing the previous inputs.
<input type="text" autocomplete="off" />
And for textarea
<textarea autocomplete="off">text</textarea>
You can also use autocomplete for a complete form.

How to use the Tab key to navigate to a button or select element on a Mac?

How do I use the Tab key to navigate to a button or select element in Firefox? I've tried setting the tabindex attribute to no avail. I'm on a Mac.
If you're using a Mac, you need to open the Keyboard preference panel, switch to the Keyboard Shortcuts tab and select:
"press Tab to move the keyboard focus between: (x) All controls"
If you know of a (preferably simple) page where this works, you might want to take a look at their source.
Also, are you sure your HTML document has the keyboard focus when trying? I'm asking because I seem to recall I can navigate to such elements with TAB in plain HTML pages where I did nothing to indicate tab order or similar.
Please post your code. Here's an example from the w3c (http://www.w3.org/TR/html401/interact/forms.html#h-17.10):
<FORM action="..." method="post">
<P>
<FIELDSET>
<LEGEND>Personal Information</LEGEND>
Last Name: <INPUT name="personal_lastname" type="text" tabindex="1">
First Name: <INPUT name="personal_firstname" type="text" tabindex="2">
Address: <INPUT name="personal_address" type="text" tabindex="3">
...more personal information...
</FIELDSET>
<FIELDSET>
<LEGEND>Medical History</LEGEND>
<INPUT name="history_illness"
type="checkbox"
value="Smallpox" tabindex="20"> Smallpox
<INPUT name="history_illness"
type="checkbox"
value="Mumps" tabindex="21"> Mumps
<INPUT name="history_illness"
type="checkbox"
value="Dizziness" tabindex="22"> Dizziness
<INPUT name="history_illness"
type="checkbox"
value="Sneezing" tabindex="23"> Sneezing
...more medical history...
</FIELDSET>
<FIELDSET>
<LEGEND>Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now"
type="radio"
value="Yes" tabindex="35">Yes
<INPUT name="medication_now"
type="radio"
value="No" tabindex="35">No
If you are currently taking medication, please indicate
it in the space below:
<TEXTAREA name="current_medication"
rows="20" cols="50"
tabindex="40">
</TEXTAREA>
</FIELDSET>
</FORM>