零基础学习HTML(17)——input标签（一）

最新推荐文章于 2020-11-29 20:39:57 发布

Dragon水魅

最新推荐文章于 2020-11-29 20:39:57 发布

阅读量354

点赞数

分类专栏：零基础学习Web开发文章标签： html

本文链接：https://blog.csdn.net/qq_43650934/article/details/108657651

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

文章目录

- - 官方资料
  - 学习正文

注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

input 标签可以向 button 一样成为提交按钮，往往通过一些全局事件onclick()来绑定JS

<!DOCTYPE html>
<html>
<head>
    <title>第十七节课</title>
    <meta charset="utf-8">
	<title>input</title>
</head>
<body>
	<p>小甲鱼的课程</p>
	<input type="button" value="按钮">
    <button type="button">按钮</button>
    <input type="button" value="按钮" onclick="fishc()">
    <script>
        function fishc() {
            alert("我爱鱼C");
        }
    </script>
</body>
</html>

在这里插入图片描述
当把type值设置为 radio，便可以实现单选框（单选需要相同的 name）：

<!DOCTYPE html>
<html>
<head>
    <title>第十七节课</title>
    <meta charset="utf-8">
	<title>input</title>
</head>
<body>
    <input type="radio" name="myredio"> 女
    <input type="radio" name="myredio"> 男
    <input type="radio" name="myredio">非男非女
</body>
</html>

在这里插入图片描述
将 type 设置为 checkbox 可以实现多选：

<!DOCTYPE html>
<html>
<head>
    <title>第十七节课</title>
    <meta charset="utf-8">
	<title>input</title>
</head>
<body>
    <input type="checkbox" name="fruit">西瓜
    <input type="checkbox" name="fruit">香蕉
    <input type="checkbox" name="fruit">草莓
</body>
</html>

在这里插入图片描述
input 还可以显示时间格式：

<!DOCTYPE html>
<html>
<head>
    <title>第十七节课</title>
    <meta charset="utf-8">
	<title>input</title>
</head>
<body>
    时间：<input type="time" name="time">
    <br><br>
    日期：<input type="date" name="date">
    <br><br>
    年月：<input type="month" name="month">
    <br><br>
    星期：<input type="week" name="week">
    <br><br>
    本地日期和时间：<input type="datetime-local" name="datetime-local">
</body>
</html>

在这里插入图片描述

html 中的保留字符：
在这里插入图片描述

Dragon水魅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
零基础学习HTML(17)——input标签（一）

文章目录官方资料学习正文注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php官方资料鱼C课程案例库：https://ilovefishc.com/html5/html5速查手册：https://man.ilovefishc.com/html5/css速查手册：https://man.ilovefishc.com/css3/学习正文input 标签可以向 button 一样成为提交按钮，往往通过一些全局事件onclick()来绑定JS&lt
复制链接

扫一扫

专栏目录