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
submit
events (submit event usually consiststype=submit
ofinput
orbutton
trigger element) - form a layer of verification done automatically, use
form.novalidate
can be closed native validate - will form a form element according to each of the
name
user input corresponding to obtain, and thenform data
toquery string
add the form toaction
the 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 typecheckbox
,tel
,number
,email
etc. 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>
Foroutput
, you may beform.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
for
may be associated with a correspondingid
connected 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[]
}
-
value
It isString[]
usually used,
after divided into one String - For complex structures
name
can 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