零基础学习HTML(18)——input标签（二）

最新推荐文章于 2024-03-07 20:19:01 发布

Dragon水魅

最新推荐文章于 2024-03-07 20:19:01 发布

阅读量313

点赞数

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

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

版权

零基础学习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/

学习正文

不会 PHP，这几节课学得心累。。。
input标签：https://man.ilovefishc.com/pageHTML5/input.html
通过设置 type 为 search 可以实现搜索框：

<!DOCTYPE html>
<html>
<head>
    <title>第十八节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="post">
		<label>你想看小甲鱼的哪个课程：<input type="search" name="search"></label>
		<br><br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

在这里插入图片描述

通过设置 type 为 color 可以实现颜色选择：

<!DOCTYPE html>
<html>
<head>
    <title>第十七节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="post">
		<label>选个颜色：<input type="color" name="color"></label>
		<br><br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

在这里插入图片描述
通过设置 image 属性可以实现自定义图片按钮：

<!DOCTYPE html>
<html>
<head>
    <title>第十七节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="GET">
		<label>这是一个按钮：<input type="image" src="fishcTor.png" alt="Green Turtle"></label>
	</form>
</body>
</html>

在这里插入图片描述

可以设置 hidden 属性来实现 input 标签的隐藏：

<!DOCTYPE html>
<html>
<head>
    <title>第十七节课</title>
    <meta charset="utf-8">
</head>
<body>
	<form action="welcome.php" method="GET">
		<label>这个按钮被隐藏掉了：<input type="hidden" value="你看不到" disabled></label>
	</form>
</body>
</html>

在这里插入图片描述

Dragon水魅

关注

0
点赞
踩
0

收藏

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

文章目录官方资料学习正文注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php官方资料鱼C课程案例库：https://ilovefishc.com/html5/html5速查手册：https://man.ilovefishc.com/html5/css速查手册：https://man.ilovefishc.com/css3/学习正文不会 PHP，这几节课学得心累。。。input标签：https://man.ilovefishc.com/page
复制链接

扫一扫

专栏目录