[HTML5] Text field-Form part for text input

Text fields are form parts for entering text. Specify "type =" text "" in the input tag.

<input type = "text" name = "address">

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

Text fields are inline block elements

Text 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 = "text" name = "address" style = "width: 100px; height: 50px;">
<input type = "text" name = "tel" style = "width: 200px; height: 80px;">

Set the font size and padding in the text field

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

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

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

In order to support iphone / safari, the font size of the text 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 text field

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

Address:

<label for = "address"> Address: </label> <input type = "text" name = "address" id = "address">

Try clicking on the label labeled Address. The text field is in focus.

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

This is a sample using jQuery to get the value of the text 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>
      Address: <input type = "text" name = "address">
    </div>
    <div>
      Phone number: <input type = "text" name = "tel">
    </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 text field

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

<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 an address * /
      var address = $(this) .closest ('form'). find ('[name = address]'). val ();
      
      alert (address);
    });
  });
</script>

<div class = "form-text-field-part">
  <form>
    <div>
      Address: <input type = "text" name = "address">
    </div>
    <div>
      Phone number: <input type = "text" name = "tel">
    </div>
    <button type = "button" class = "submit_button"> Submit </button>
  </form>
</div>

HTML・CSS Writing 2022