Problem moving checkbox and the text to the left - html

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>

Related

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.

Sinatra app form isn't posting the entire form

I have a basic Ruby/Sinatra app with a form that doesn't seem to be working quite right. The form has two inputs, a text box and a textarea. When I inspect the params that should be passed back to the app by the form, I only see the input from the text box, but not the textarea. My code is below:
In app.rb
post '/create' do
params.inspect
end
In new.erb
<h1>Add New Page</h1>
<div>
<form method="post" action="/create">
<fieldset>
<label for="title">Title:</label>
<input type="text" name="title" id="title">
</fieldset>
<fieldset>
<label for="content">Content:</label>
<textarea rows="10" columns="50" id="content"></textarea>
</fieldset>
<input type="submit">
</form>
</div>
Back to Index
When I navigate to http://localhost:4567/create it only returns:
{"title"=>"asdf"}
But there should also be some sort of information returned for the textarea input as well!
Turns out the Sinatra params hash in Sinatra looks for the name attribute in input tags. Found that information at https://learn.co/lessons/sinatra-forms-params-readme-walkthrough
The correct declaration for the text area box should've been like this:
<fieldset>
<label for="content">Content:</label>
<textarea rows="10" columns="50" name="content" id="content"></textarea>
</fieldset>

Add a right-text in a input area

I must have this input with a text on the right.
So, it isn't a placeholder, it's a real input.
To do this, I must add a div for the text ?
I sought on the web but I didn't find any code :-(
You need to add value="something" and to pull it to the right, you need to add style="text-align:right"
<form>
<input type="text" style="text-align:right" value="abcd"><br>
<input type="text" style="text-align:right" value="efgh"><br>
<input type="submit" value="Submit">
</form>

Title for a form

I am working on an assignment and am a little lost. The question states:
Create a label element with the text Username. Within the label element, insert
an input box for the username field. Make the field required and add the title Supply
your username
Here is what I have. I am mainly confused on the title portion. Any help is greatly appreciated, and feel free to correct me on the other parts. Thank you
<form id="survey" name="survey"
action="www.sblogger/cgi-bin/subcomments"
method="post">
<fieldset id="commentFS"
<label>
Username
<input id="username">
required="required"
</label>
</fieldset>
</form>
You just need to add a title attribute on the input field. Also the label tag can stay on it's own, which leaves to:
<form id="survey"
name="survey"
action="www.sblogger/cgi-bin/subcomments"
method="post">
<fieldset id="commentFS">
<label>Username</label>
<input id="username"
title="Supply your username"
required>
</fieldset>
</form>
The assignment is not well-defined, since it does not say what kind of a title should be included. It may refer to an advisory title that may be presented to user in some situations (e.g., on mouseover), as assumed in #Jeffrey’s answer. It may also refer to text that appears inside the input box when it is empty, in which case you would use the placeholder attribute. It can also refer to visible text before the input box; this would be the most reasonable setup. Even then, there are several alternatives. It could be just text before the label and the input box, or it could be wrapped in a heading element, or even a legend for a fieldset. The following example is based on the wild assumption that such a legend is desired (which might be a wrong guess if you have actually been told to use the fieldset element, as you are using, although there is no reason to use it in a simple case like this).
<form id="survey" name="survey"
action="http://www.example.com/cgi-bin/subcomments"
method="post">
<fieldset id="commentFS">
<legend>Supply your username</legend>
<label>
Username
<input id="username" name="username"
required="required">
</label>
</fieldset>
<input type="submit" value="Submit">
</form>
Notes: The attribute required="required" (or just required unless you have been told to use XHTML syntax) must appear inside the <input ...> element, not after it. And the input element needs a name attribute, otherwise the data in it will not be sent at all to the server.

Labels Causing Text Boxes to Deselect

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>