[HTML5] Password field --Password input form part

The password field is a form part for entering a password. Specify "type =" password "" in the input tag. Unlike text field, I can't see the characters I typed.

<input type = "password" name = "password">

You can enter the password. Since it is a form part, it is common to give it a name with the name attribute.

Password field is an inline block element

Password fields are inline block elements by default. Since it is an inline block element, it flows to the left and you can set the height and width.

<input type = "password" name = "password" style = "width: 100px; height: 50px;">

Set the font size and padding in the password field

The default password field is a bit small, especially for smartphones. Let's set the appropriate padding in the password field.

<input type = "password" name = "password" style = "padding: 12px 5px 10px 5px;">

To support iphone / safari, the font size of the password field should be 16px or more

In order to support iphone / safari, the font size of the password field should be 16px or more. This is to turn off the automatic enlargement function when filling out a form on iphone / safari.

Prevent the default design from being applied to form parts on iphone / safari

In iphone / safari, specify "-webkit-appearance: none;" to prevent the default design from being applied to form parts. Please refer to Resolved the default design of text fields and buttons applied in iphone / safari.

Make sure the focus is on when you click the label in the password field

Use the label tag to get focus when you click on an item heading, not just the password field. Specify the name specified in the id attribute in the input tag in the for attribute of the label tag.

Password:

<label for = "password"> Password: </label> <input type = "password" name = "password" id = "password">

Try clicking on the label labeled Password. The password field is in focus.

Get the value of the form password field with jQuery when submitting the form

This is a sample using jQuery to get the value of the password field when the submit button is pressed. It is often used when sending a POST request with ajax. The acquired contents are displayed by alert.

How to get all the values in a form

How to get all the values in a form.

<script src = "https://code.jquery.com/jquery-3.4.1.min.js"> </script>
<script>
  $(function () {
    $(document) .on ('click','.form-text-field-all .submit_button', function () {
      
      / * How to get all the values in a form * /
      var data = $(this) .closest ('form') .serialize ();
      
      alert (data);
    });
  });
</script>

<div class = "form-text-field-all">
  <form>
    <div>
      Password: <input type = "password" name = "password">
    </div>
    <button type = "button" class = "submit_button"> Submit </button>
  </form>
</div>

The reason for starting on ('click') from document is to support dynamic HTML rewriting. If you follow from the top of the document, it will work correctly even if the HTML part is dynamically rewritten. If you specify "type =" button "" for button, you can eliminate the behavior of submitting the button of the form.

How to get the value of an individual password field

How to get the value of an individual password field. I only get the password.

<script src = "https://code.jquery.com/jquery-3.4.1.min.js"> </script>
<script>
  $(function () {
    $(document) .on ('click','.form-text-field-part .submit_button', function () {
      
      / * Get password * /
      var password = $(this) .closest ('form'). find ('[name = password]'). val ();
      
      alert (password);
    });
  });
</script>

<div class = "form-text-field-part">
  <form>
    <div>
      Password: <input type = "password" name = "password">
    </div>
    <button type = "button" class = "submit_button"> Submit </button>
  </form>
</div>

HTML・CSS Writing 2022