[HTML5] Textarea-Form part for multi-line text input

The text area is a form part for entering multiple lines of text. Use the textarea tag to create a text area.

<textarea name = "message"> </textarea>

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

Text area is an inline block element

The text area is an inline block element by default. Since it is an inline block element, it flows to the left and you can set the height and width.

<textarea name = "message" style = "width: 100px; height: 50px;"> </textarea>
<textarea name = "message" style = "width: 200px; height: 80px;"> </textarea>

Set the font size, minimum height, and padding in the text area

The default text area is a bit small, especially for smartphones. Let's set the appropriate font size, minimum height, and padding in the text area.

<textarea style = "padding: 11px 5px 9px 5px; font-size: 16px; min-height: 200px;"> </textarea>

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

In order to support iphone / safari, the font size of the text area 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 Resolving the default design of text areas and buttons applied in iphone / safari.

Make sure the focus is on when you click the label in the text area

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

Inquiry content:

<label for = "message"> Inquiry content: </label> <input type = "text" name = "message" id = "message">

Please click on the label labeled Inquiry Content. The text area is in focus.

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

This is a sample using jQuery to get the value of the text area 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>
      Inquiry content: <textarea name = "message"> </textarea>
    </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 area

How to get the value of an individual text area. I am getting only the contents of the inquiry.

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

<div class = "form-text-field-part">
  <form>
    <div>
      Inquiry content: <textarea name = "message"> </textarea>
    </div>
    <button type = "button" class = "submit_button"> Submit </button>
  </form>
</div>

HTML・CSS Writing 2022