携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情
表单
项目中，表单可能是用的最多的东西了，处处可见他的存在，用他来做提交，搜索等等...例如办理银行卡填写的申请表、找工作填写的简历、入学时填写的个人信息。这些都是表单的一种网页中的表单是用来向服务器提交信息的我们最常用到的表单就是搜索框
- 表单可以将用户填写的信息提交的服务器
表单项
- 文本框
<input type="text"name="name">
- 密码框
<input type="password"name="pwd">
- 多选框
<input type="checkbox"name="sports">
- 单选框
<input type="radio"name="gender">
-
提交按钮
<input type="submit"value="提交"> -
下拉列表
<seLect>
<option>北京</option>
</select>
input
input是我们使用的最多的表单项，它可以根据不同的type属性呈现不同的状态。
- type属性可选值：
- text:文本框
- password:密码框
- submit:提交按钮
- radio:单选按钮
- checkbox:多选框
- reset:重置按钮
select、option
- select用于创建一个下拉列表。
- option表示下拉列表中的列表项。
- optgroup,用于为列表项分组。
textarea
textarea用来创建一个文本域，实际效果和文本框类似，只是可以输入多行数据。
- 可用属性：
- cols:文本域的列数
- rows:文本域的行数
fieldset、legend、label
- fieldset用来为表单项进行分组。
- legend.用于指定每组的名字。
- label标签用来为表单项定义描述文字。
项目中的表单
在现在的项目中，表单不在是原来的那种样式展示了，显得项目很low，现在表单都是通过大量的css样式去给他美化，展现出更舒服更漂亮的表单给用户，这样用户的体验也会好很多。
我们可以看见现在的项目都会引入样式框架，比如常见的 pc端 element-ui iview 手机端 vant 等等，这些框架的样式都很漂亮。
比如有带上icon图标的表单
加上前缀的表单
禁用状态下的表单
长度限制的表单
可以看见和谐表单都比常规的表单漂亮很多，也是现在项目中常规使用，所以，表单赶紧练起来吧。
