一、表单标签(form)
- 基本结构与元素
- form:属于块级元素,可独占一行显示,能直接设置宽度高度。
- input:属于行内块元素,可在同一行显示,能直接设置宽度高度。
- 常见的 input 类型包括文本输入框(
type = "text"
)、密码输入框(type = "password"
)、数字输入框(type = "number"
)、日期选择框(type = "date"
)、时间选择框(type = "time"
)、颜色选择框(type = "color"
)、按钮(type = "button"
)、提交按钮(type = "submit"
)、重置按钮(type = "reset"
)、单选框(type = "radio"
,需和 name 属性搭配使用)、复选框(type = "checkbox"
)、文件选择框(type = "file"
,可添加multiple
属性选择多个文件)等。例如:
<form action="http://47.92.204.130:3000/api/admin/login" method="POST">
<div><input type="text" placeholder="请输入账号" name="admin_email"></div>
<div><input type="password" placeholder="请输入密码" name="admin_pwd"></div>
<div><input type="submit" value="登录"><input type="reset" value="重置"></div>
</form>
-
表单属性
- action:填写服务器接口地址。
- method:填写请求方法(POST/GET)。
-
其他要点
- 点击 form 标签中的提交按钮会刷新页面并跳转。
- 一些属性含义:
- checked:在单选框、复选框中表示默认勾选。
- selected:在下拉菜单中表示默认选中。
- disabled:表示禁止输入、禁止选择。
-
下拉菜单(select)
- 使用
option
标签构建选项,disabled
可禁用选项,selected
可设置默认选中。例如:
- 使用
<select name="province">
<option value="0" disabled>请选择省份</option>
<option value="1">广东省</option>
<option value="1">浙江省</option>
<option value="1" selected>福建省</option>
<option value="1">湖北省</option>
</select>
- label 标签
label
标签的for
属性对应input
标签的id
属性,点击描述文本可使输入框获取焦点。例如:<label for="username">用户名:</label><input type="text" id="username">
二、文本输入域标签(textarea)
- 可以通过
placeholder
属性设置占位符提示信息。例如:
<textarea class="text - box" placeholder="有什么新鲜事想分享给大家?"></textarea>
三、框架标签(iframe)
基本使用
- 通过
a
标签的target
属性和iframe
标签的name
属性关联,点击a
标签的链接可在iframe
框架中显示相应页面。例如:<div class="wrapper"> <div class="left"> <a target="container" href="./web/one.html">页面1</a> <a target="container" href="./web/two.html">页面2</a> <a target="container" href="./web/three.html">页面3</a> </div> <div class="right"> <iframe class="ifr" name="container" src="./web/one.html" frameborder="0"></iframe> </div> </div>
- iframe 属性
- src:填写页面地址。
- name:作为框架名称、容器名称。
四、转义字符 / 实体字符
- 如
¥
、©
、>
、<
等,在 HTML 中用于表示特殊字符。例如:<div class="layout">¥ © > ⪧ < ⪦</div>
五、补充
1、input 属性
- name:作为控件名称。
- value:定义输入框的值,如
value = ""
。 - placeholder:用于设置占位符。
- type:指定 input 的控件类型。
- disabled:可禁用可交互的表单控件。
- readonly:使表单只读。
- hidden:用于隐藏元素。
- checked:让控件处于默认选中状态。
- autofocus:页面刷新时自动聚焦该表单控件,一个文档中只能有一个对象使用此属性。
- autocomplete:用于表单自动填充,可设置为 on/off。
- pattern:当 input 元素 type 为 password、text、tel 时,用于匹配有效 value 的模式。
- alt:当 type = image 时,出于可访问性考虑设置。
- accept:当 type = "file" 时,用于控制上传文件类型,如
accept = ".ppt"
。 - step:range 类型和 number 类型中,数值递增递减的步长,如
step = "2"
。 - min 和 max:range 类型和 number 类型中,可控制最大和最小值(超出范围有提示),如
min = "0" max = "100"
。 - minlength 和 maxlength:分别表示输入框输入的最小长度和最大长度,小于最小长度有提示,超过最大长度无法输入。
2、input 元素
- type 属性的常用类型
- text:单行文本输入框,如
<input type = "text">
。 - number:数字框,如
<input type = "number">
。 - password:密码框,如
<input type = "password">
。 - button:普通按钮,需设置
value
来描述按钮,如<input type = "button" value = "按钮描述">
。 - submit:提交按钮,如
<input type = "submit">
。 - reset:重置按钮,如
<input type = "reset">
。 - radio:单选框,需和 name 属性搭配使用,name 属性相同为同一组控件,如
<input type = "radio">
。 - checkbox:复选框,如
<input type = "checkbox">
。 - file:文件域,如
<input type = "file">
。 - hidden:隐藏域,如
<input type = "hidden">
。 - image:图片类型的提交按钮,需设置
src
,如<input type = "image" src>
。 - email:邮件输入框,如
<input type = "email">
。 - tel:电话输入框,如
<input type = "tel">
。 - search:搜索输入框,如
<input type = "search">
。 - range:滑块,需设置
value
,如<input type = "range" value = "">
。 - url:链接输入框,如
<input type = "url">
。 - color:颜色选择框,如
<input type = "color">
。 - date:日期选择框,如
<input type = "date">
。 - time:时间选择框,如
<input type = "time">
。 - datetime - local:日期和时间的本地写法,如
<input type = "datetime - local">
。 - month:月份选择框,如
<input type = "month">
。 - week:周选择框,如
<input type = "week">
。
- text:单行文本输入框,如