前言:input 作为html中跟用户交互最直接相关的标签,可以用来输入文本,文件上传,提交表单等等…input标签的应用非常广泛,也可以设置很多不同的属性。这篇博客主要总结了input标签的使用。
文章目录
(一)常用 input 的 type 属性1. HTML 文本输入框2. HTML 文件上传3. HTML提交按钮4. HTML DOM Button 对象5. HTML DOM Checkbox 对象6. HTML DOM Color 对象7. HTML DOM Input Date 对象
首先,我们来看一下
常用的示例:
<!DOCTYPE html>
<head>
<title>input标签使用示例</title>
</head>
<body>
<input type="text" placeholder="这是一个 文本输入框"><br><br>
<input type="file"><br><br>
<input type="button" value="点我点我!" onclick="clicked()"><br><br>
<input type="checkbox">点击选中<br><br>
<input type="color" value="点击取颜色哦!"><br><br>
<input type="date" value="2019-11-01"><br><br>
<input type="submit" value="提交提交!">
</body>
<script>
function clicked() {
alert("按钮被选中!!!")
}
</script>
实现的效果如下图:
(一)常用 input 的 type 属性
1. HTML 文本输入框
标签语法<input type="text">
HTML元素含义HTML 文档中的一个文本输入框特有行为/属性
2. HTML 文件上传
标签语法<input type="file">
HTML元素含义HTML 文档中的 上传文件 按钮特有行为/属性
3. HTML提交按钮
标签语法<input type="submit">
HTML元素含义HTML 文档中的 提交 元素特有行为/属性提交整个表单
4. HTML DOM Button 对象
标签语法<input type="button">
HTML元素含义HTML 文档中的一个按钮特有行为/属性该元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用。
5. HTML DOM Checkbox 对象
标签语法<input type="checkbox">
HTML元素含义HTML 表单中的 一个选择框特有行为/属性defaultChecked:返回 checked 属性的默认值。
6. HTML DOM Color 对象
标签语法<input type="color">
HTML元素含义HTML 文档中的 一个拾色器特有行为/属性span:设置或返回列的 span 属性的值
注:Internet Explorer 和 Safari 不支持 <input type="color">元素。
7. HTML DOM Input Date 对象
标签语法<input type="datetime">
HTML元素含义HTML 文档中选择 Date 控件特有行为/属性
注:Internet Explorer 或 Firefox 不支持 <input type="date"> 元素。