外观
表单
约 620 字大约 2 分钟
2024-10-02
作用: 收集用户信息.
使用场景:
- 登录页面.
- 注册页面.
- 搜索页面.
标签名: form双标签.
建议: 所有用到表单控件的地方都使用form嵌套.
表单控件
input 标签的基本使用
input标签type属性的不同, 则功能不同.
<input type=""/>type 属性:
| 类型 | 描述 |
|---|---|
| text | 文本框, 输入单行文本. |
| password | 密码框. |
| radio | 单选框, 允许在多个拥有相同 name 值的选项中选中其中一个. |
| checkbox | 多选框, 允许在多个拥有相同 name 值的选项中选中多个. |
这里列出 4 个常用的, 全部可见 mozilla 文档
<form>
<input type="text" placeholder="文本框" />
<br />
<input type="password" placeholder="密码框" />
<br />
1:<input type="radio" name="a" checked /> 2:<input
type="radio"
name="a" />
<br />
1:<input type="checkbox" name="a" /> 2:<input
type="checkbox"
name="a"
checked />
<br />
</form>placeholder: 输入框为空时, 显示的提升文本.
checked: 默认选择项.
下拉菜单
标签名: select, option双标签.
<form>
城市:
<select>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gd">广东</option>
<option value="sz">深圳</option>
<option value="wh" selected>武汉</option>
</select>
</form>默认显示第一项, 但是如果项里有selected则默认显示有selected的.
文本域
作用: 多行输入文本.
标签名: textarea双标签.
<textarea>默认显示的文本</textarea>label 标签
作用: 网页中, 某个标签的说明文本.
用label标签绑定文本和表单控件 1 关系, 增大表单控件的点击范围.
写法一:
label标签只嵌套内容, 不嵌套表单控件.
设置label标签的for属性和表单控件的id属性相同.
<input type="radio" id="man" /><label for="man">男</label>方法二:
使用label标签嵌套文本和表单控件, 不需要属性.
<label><input type="radio" />女</label>提示: 支持label标签增大点击范围的表单控件: 文本框, 密码框, 上传文件, 单选框, 多选框, 下拉菜单, 文本域等等.
按钮
<buttor>按钮</buttor>type 属性:
| 类型 | 描述 |
|---|---|
| submit | 提交按钮, 点击后, 提交数据到后台. |
| reset | 重置按钮, 点击后, 将表单控件恢复默认值. |
| button | 普通按钮, 默认没有任何功能, 一般配合Js使用. |
版权所有
版权归属：洱海