表单元素
从 HTML 到 HTML5, 表单相干的元素已得到了很大的扩大, 基础能够满足我们罕见的需求。但在现实工作中, 由于交互或许浏览器兼容的须要, 有时候不得不对原生的表单元素举行扩大或许模仿。但在此之前, 清晰的相识并掌握种种表单元素照样很主要的。在本文中, 我们将对表单元素 (默许是指 HTML5 表单元素)举行细致的论述。
form 1
- form 会自动处置惩罚
submit
事宜 (submit 事宜一般由type=submit
的input
或许button
的元素触发) - form 会自动做一层校验,运用
form.novalidate
能够封闭原生的 validate - form 会依据每个表单元素的
name
取得对应的用户输入, 然后将form data
以query string
的情势添加到action
属性对应的 url 背面。默许的要求要领是 GET, 默许的action 是当前的 url。 -
event.target.elements
将会返回一切表单元素
<form novalidate>
<input name='username' required/>
<input name='passworkd' type='password' required/>
<input name='email' type='email'/>
<input type='submit' value='submit'/>
</form>
运转上面的代码能够看到, 提交表单以后,浏览器的地点会增添相似如许的 query string
?username=tom&passworkd=123&email=test%40gmail.com
可交互型 elements
须要跟用户举行交互,并取得用户输入的这一类表单元素,我们把它们归类为 可交互型表单元素
。
下面枚举出来了一些:
-
input
: 经常使用的 type 有checkbox
,tel
,number
,email
等 textarea
select
option
反应型 elements
只是纯真地反应信息, 不须要跟用户举行交互的表单元素,我们把它们归类为 反应型表单元素
。
下面枚举出来了一些:
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>
关于
output
, 能够在
form.oninput
设置计算出来的 value
分组型 elements
用来对多个表单元素举行分组的这一类表单元素, 我们把他们归类为 分组型表单元素
。
下面枚举出来了一些:
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
- 用
for
可与对应关联了id
的交互 element 相连 - 能够用来包裹
可交互 elment
, 包含多个, 掌握第一个 - 不发起嵌套
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>
用 JavaScript 处置惩罚表单
field 的笼统
最基础的构造:
field: {
name: String,
value: String || String[]
}
-
value
的String[]
一般是用,
支解后合成为一个 String - 关于庞杂构造的
name
能够运用keyPath
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'
}
]
}
};
假如对上面的代码不是很清晰的, 请参考 qs
一个完全的完成
- 阻挠 form 默许的 submit 事宜
- checkbox 须要拿 checked 而不是 value
- select-multiple 须要存多个值
- 除了以上几个特别的交互元素以外, 其他的都默许从 value 中去取值
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));
});
末端
假如你还想继承相识在 react 中怎样运用 form, 请移步我的另一篇博客 React.js — 优化你的表单