[HTML5] Select field-Form part to select an item

The select field is a form part for selecting an item. Use the select and option tags.

<select name = "price">
  <option value = "-1"> Select a price </option>
  <option value = "1000"> less than 1000 yen </option>
  <option value = "2000"> From 1000 yen to 2000 yen </option>
  <option value = "3000"> From 2000 yen to 3000 yen </option>
  <option value = "99999999"> 3000 yen or more </option>
</select>

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

Specify the value you want to send to the server in the value attribute.

Select field is an inline block element

Select 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.

<select name = "price" style = "width: 150px; height: 50px;">
  <option value = "-1"> Select a price </option>
  <option value = "1000"> less than 1000 yen </option>
  <option value = "2000"> From 1000 yen to 2000 yen </option>
  <option value = "3000"> From 2000 yen to 3000 yen </option>
  <option value = "99999999"> 3000 yen or more </option>
</select>

<select name = "price" style = "width: 200px; height: 80px;">
  <option value = "-1"> Select a price </option>
  <option value = "1000"> less than 1000 yen </option>
  <option value = "2000"> From 1000 yen to 2000 yen </option>
  <option value = "3000"> From 2000 yen to 3000 yen </option>
  <option value = "99999999"> 3000 yen or more </option>
</select>

Set the font size and padding in the select field

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

<select name = "price" style = "padding: 5px 5px 9px 5px; font-size: 16px;">
  <option value = "-1"> Select a price </option>
  <option value = "1000"> less than 1000 yen </option>
  <option value = "2000"> From 1000 yen to 2000 yen </option>
  <option value = "3000"> From 2000 yen to 3000 yen </option>
  <option value = "99999999"> 3000 yen or more </option>
</select>

In order to support iphone / safari, the font size of the select field should be 16px or more

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

Get the value of the form's select field with jQuery when submitting the form

This is a sample using jQuery to get the value of the select 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>
    <select name = "price">
      <option value = "-1"> Select a price </option>
      <option value = "1000"> less than 1000 yen </option>
      <option value = "2000"> From 1000 yen to 2000 yen </option>
      <option value = "3000"> From 2000 yen to 3000 yen </option>
      <option value = "99999999"> 3000 yen or more </option>
    </select>
    <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 select field

How to get the value of an individual select field. I'm only getting the price.

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

<div class = "form-text-field-part">
  <form>
    <select name = "price">
      <option value = "-1"> Select a price </option>
      <option value = "1000"> less than 1000 yen </option>
      <option value = "2000"> From 1000 yen to 2000 yen </option>
      <option value = "3000"> From 2000 yen to 3000 yen </option>
      <option value = "99999999"> 3000 yen or more </option>
    </select>
    <button type = "button" class = "submit_button"> Submit </button>
  </form>
</div>

HTML・CSS Writing 2022