html中input标签的使用

mac2025-12-27  5

前言: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"> 元素。

最新回复(0)