In-depth understanding of form series (a) - HTML form

Form elements

From HTML to HTML5, form-related elements has been greatly expanded, and can basically meet our common needs. But in practice, because the interaction or browser compatibility needs, and sometimes had to form elements extend native or analog. But before that, clearly understand and master a variety of form elements is very important. In this article, we will form elements (default refers to HTML5 form elements) were elaborated.

form 1

  • form automatically handles submitevents (submit event usually consists type=submitof inputor buttontrigger element)
  • form a layer of verification done automatically, use form.novalidatecan be closed native validate
  • will form a form element according to each of the nameuser input corresponding to obtain, and then form datato query stringadd the form to actionthe back corresponding to the attribute url. The default request method is GET, the default action is the current url.
  • event.target.elements We will return all the form elements
<form novalidate>
  <input name='username' required/>
  <input name='passworkd' type='password' required/>
  <input name='email' type='email'/>
  <input type='submit' value='submit'/>
</form>
Run the above code can be seen, after submitting the form, your browser's address will increase like this query string ?username=tom&passworkd=123&email=test%40gmail.com

Interactive elements can

The need for user interaction with, and access to this type of user input form elements, we put them classified as 可交互型表单元素.

Here are a few out:

  • input: There are common type checkbox, tel, number, emailetc.
  • textarea
  • select
  • option

Feedback elements

Just simply feedback, form elements do not require interaction with the user, we classify them as 反馈型表单元素.

Here are a few out:

  • meter
  • output
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type='number' value='50' name='a' />
    <input type='number' value='10' name='b' />
    <output name='result'>60</output>
</form>
For output , you may be form.oninput provided calculated value

Grouped elements

For multiple form elements are grouped in this type of form elements, we put them classified as 分组型表单元素.

Here are a few out:

  • fieldset
  • optgroup
<form>
  <select>
    <optgroup label='group1'>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </optgroup>
    <optgroup label='group2'>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </optgroup>
    <optgroup label='group3'>
      <option>7</option>
      <option>8</option>
      <option>9</optioin>
    </optgroup>
  </select>
</form>

label

  • With formay be associated with a corresponding idconnected element interaction
  • It can be used to wrap 可交互 elment, comprising a plurality of control of a
  • Nesting is not recommended label
<form>
  <fieldset>
    <legend>Title</legend>
    <label for='radio'>Click me</label>
    <input type='radio' id='radio'/>
  </fieldset>
</form>
<form>
  <fieldset>
    <legend>用户信息</legend>
    <label>
      男 <input type='radio' name='gender' id='male' />
    </label>
    <label>
      女 <input type='radio' name='gender' id='female'/>
    </label>
  </fieldset>
</form>

Handling Forms with JavaScript

field abstract

The most basic structure:

  field: {
    name: String,
    value: String || String[]
  }
  • valueIt is String[]usually used ,after divided into one String
  • For complex structures namecan be usedkeyPath
  const fromKeyValues = {
    'user.name': 'Tom',
    'user.phone[0].number': '123456',
    'user.phone[0].type': 'mobile'
  };

  const fromValues = {
    user: {
      name: 'Tom',
      phone: [
        {
          number: '123456',
          type: 'mobile'
        }
      ]
    }
  };

If the code is not very clear on the above, please refer to qs

A complete implementation

  • Prevent form submit event of default
  • checkbox needs to get checked rather than value
  • a plurality of select-multiple stored values ​​need
  • In addition to more than a few special interactive elements, the rest are from the default value to the value of

form.html

<form>
    <fieldset>
        <legend>Login</legend>
        <input name='username' placeholder='username' minlength='2'/>
        <input name='password' type='password' placeholder='password'/>
        <label>
            remember password
            <input name='checkbox' type='checkbox'/>
        </label>
    </fieldset>
    <fieldset>
        <div class="gender">
            <legend>More Info</legend>
            <label>
                男
                <input name='gender' type='radio' value='male' />
            </label>
            <label>
                女
                <input name='gender' type='radio' value='female' />
            </label>
        </div>
        <select name='select' multiple>
            <option>1</option>
            <optgroup label='2'>
                <option>2.1</option>
                <option>2.2</option>
            </optgroup>
        </select>
    </fieldset>
    <button type='submit'>Submit</button>
</form>

form.js

var $form = document.querySelector('form');

function getFormValues(form) {
  var values = {};
  var elements = form.elements; // elemtns is an array-like object

  for (var i = 0; i < elements.length; i++) {
    var input = elements[i];
    if (input.name) {
      switch (input.type.toLowerCase()) {
        case 'checkbox':
          if (input.checked) {
            values[input.name] = input.checked;
          }
          break;
        case 'select-multiple':
          values[input.name] = values[input.name] || [];
          for (var j = 0; j < input.length; j++) {
            if (input[j].selected) {
              values[input.name].push(input[j].value);
            }
          }
          break;
        default:
          values[input.name] = input.value;
          break;
      }
    }

  }

  return values;
}

$form.addEventListener('submit', function(event) {
  event.preventDefault();
  getFormValues(event.target);
  console.log(event.target.elements);
  console.log(getFormValues(event.target));
});

end

If you want to continue to learn how to use the form in react, please move my another blog React.js - optimize your form


  1. MDN on the form of presentation

Guess you like

Origin www.cnblogs.com/homehtml/p/12556216.html