如何在 HTML、CSS 和 JS 中制作明暗模式按钮

我们都见过它们，它们保护我们的眼睛免受所有光线的伤害。 这些是暗模式按钮，这里是如何在 HTML、CSS 和 JS 中创建自己的按钮！

我们要做的第一件事是创建 HTML 文件。 我正在使用引导程序使按钮看起来不错。 我要做的第一件事是将引导程序链接到我的 HTML 文件，这样我就可以访问所有按钮。

这是样板 HTML 代码。 现在我将添加按钮并链接 css 样式表。 如果您正在跟进，请在与您的 HTML 文件相同的目录中创建一个 style.css 文件。

我使用了引导 btn-dark 类，它只是一个简单的深色按钮。

现在为 css。 我将创建一个 .dark 类，但我知道我们还没有分配它。 那将适用于黑暗模式。

现在，我们将添加一些 javascript。 我们不会制作新文件，因为它不会那么多。 我将首先给按钮一个“按钮”类，然后从那里开始工作。我将添加一个事件侦听器，然后在单击时，我将切换 HTML 主体类 dark 。然后我将向主体添加一个 ID，以便我们可以 使用 JavaScript 选择它。然后我将更改文本和按钮颜色，以便我们可以来回切换。

仅此而已！ 谢谢阅读。 如果你喜欢，请关注！

零基础学习HTML背景表单单选按钮复选框上传文件下拉列表

HTML 背景

设置背景颜色<body bgcolor=\”#000000\”>

设置背景图片<body background=\”bg.jpg\”>

设置页面文字颜色<body text=\”#cccccc\”>

颜色属性值有三种值的格式

1，英文单词，比如 red , yellow ,green …

<body bgcolor=\”yellow\”>

2, 十六进制表示方式，#开头，6个十六进制的字符或数字 组合

比如：#FFFFFF，#000000，#CCCAAA，#22BCAD

十六进制： 0-9 和 a-f

3, RGB模式，红 0-255，绿 0-255，蓝 0-255

比如： RGB(120,33,234)

HTML 表单

表单是一个包含表单元素的区域。

表单能够包含 input 元素，textarea、select、fieldset、legend 和 label 元素。

表单使用标签（<form>）定义。

表单用于向服务器传输数据。

表单的结构

<form name=\”form1\” action=\”URL\” method=\”get\”>

用户名：<input type=\”text\” name=\”uname\” />

密 码：<input type=\”password\” name=\”passwd\” />

</form>

属性说明

name表单的名称

action表单提交地址

method表单数据提交的方式 （get ,post）

enctypeMIME类型

target打开方式

input标签

属性说明

typeinput元素类型

nameinput 元素的名称

valueinput 元素的值

sizeinput 元素的宽度

readonly是否只读

maxlength输入字符的最大长度

disabled是否禁用

1.文本框

<input type=\”text\” name=\”username\” value=\”\” />

2.密码框

<input type=\”password\” name=\”passwd\”/>

3.单选按钮

<input type=\”radio\” name=\”sex\”value=\”1\”checked=\”checked\” />男

<input type=\”radio\” name=\”sex\”value=\”0\”/>女

4.复选框

<input type=\”radio\” name=\”sex\”value=\”1\”checked=\”checked\” />男

<input type=\”radio\” name=\”sex\”value=\”0\”/>女

<input type=\”checkbox\”name=\”love\”value=\”music\” checked=\”checked\”/> 听音乐

<input type=\”checkbox\”name=\”love\” value=\”movie\”/> 看电影

<input type=\”checkbox\”name=\”love\” value=\”game\”/> 玩游戏

5.按钮

<input type=\”button\” name=\”btn\” value=\”确定\”/>

<input type=\”submit\” name=\”comit\” value=\”提交\”/>

<input type=\”reset\” name=\”reset\” value=\”重写\”/>

<input type=\”image\” name=\”img_btn\” src=\”btn.gif\”/>

6. 隐藏域

隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。

<input type=\”hidden\” name=\”uid\” value=\”10\”/>

7. 上传文件

<input type=\”file\” name=\”photo\”/>

注：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

<textarea> 多行文本框

<textarea name=\”content\” rows=\”5\” cols=\”50\”> </textarea>

属性说明

name元素的名称

rows指定文本框的高度

cols指定文本框的宽度

select下拉列表框

<select name=\”city\”>

<option value=\”0\”>请选择</option

<option value=\”bj\”>北京</option>

<option value=\”gz\”>广州</option>

</select>

属性说明

name下拉列表框的名称

size下拉列表框的显示行数

multiple是否多选

disabled是否禁用

selected设置默认选中的选项

value选项的值

optgroup标签

optgroup 元素用于组合选项 。

属性说明

label指定组合选项名称

fieldset标签

fieldset 标签作用是把表单中元素组合起来

<fieldset>

<legend></legend> length为字符长度

<form></form>

</fieldset>

label标签

lable 标签的作用是将输入项或选项及其标签文字关联起来。

<input type=\”radio\” name=\”sex\” value=\”1\” id=\”male\” />

<label for=\”male\”>男</label>

<input type=\”radio\” name=\”sex\” value=\”0\” id=\”female\” />

<label for=\”female\”>女</label>

HTML表单及其Input输入类型

HTML 表单用于搜集不同类型的用户输入。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证，今天将为大家带来HTML中的表单及其input输入类型。

一、HTML表单

1、HTML表单用于收集不同类型的用户输入，是一个包含表单元素的区域并且允许用户在表单中输入内容，比如文本域（textarea）、下拉列表、单选框（radio=buttons）、复选框（checkboxes）等。

2、表单使用标签<form>来设置，示例：

运行结果：

二、HTML表单属性：

1、HTML表单包含表单元素，表单元素是指不同类型的input元素、复选框、单选按钮、提交按钮等。

2、action属性

在上面的示例中出现了action属性，action属性定义在提交表单执行的动作，向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到web服务器上的网页，上面的例子中，则指定了某个服务器脚本来处理被提交表单。

如果省略 action 属性，则 action 会被设置为当前页面。

3、method 属性

method属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，使用get。

如果表单正在更新数据，或者包含敏感信息（例如密码），使用post。

4、如果要正确地被提交，每个输入字段必须设置一个 name 属性，示例：

<!DOCTYPE html>

<html>

<body>

<form action=\”/demo/demo_form.asp\”>

First name:<br>

<input type=\”text\” name=\”Firstname\” value=\”Mickey\”>

<br>

Last name:<br>

<input type=\”text\” name=\”lastname\” value=\”Mouse\”>

<br><br>

<input type=\”submit\” value=\”Submit\”>

</form>

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>

</body>

</html>

运行结果：

5、target 属性

target 属性规定提交表单后在何处显示响应，target 属性可设置以下值之一：

默认值为 _self，这意味着响应将在当前窗口中打开。

6、Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值，示例：

运行结果：

7、所有<form>属性的列表：

三、HTML表单元素：

1、<input>元素是最重要的表单元素，有很多的形态，根据不同的type属性，例如：

①　文本输入（text），示例：

<!DOCTYPE html>

<html>

<body>

<form>

First name:<br>

<input type=\”text\” name=\”firstname\”>

<br>

Last name:<br>

<input type=\”text\” name=\”lastname\”>

</form>

<p>请注意表单本身是不可见的。</p>

<p>同时请注意文本字段的默认宽度是 20 个字符。</p>

</body>

</html>

运行结果：

②　单选按钮输入（radio），示例：

<!DOCTYPE html>

<html>

<body>

<form>

<input type=\”radio\” name=\”sex\” value=\”male\” checked>Male

<br>

<input type=\”radio\” name=\”sex\” value=\”female\”>Female

</form>

</body>

</html>

运行结果：

③　提交按钮（submit），示例：

<!DOCTYPE html>

<html>

<body>

<form action=\”/demo/demo_form.asp\”>

First name:<br>

<input type=\”text\” name=\”firstname\” value=\”Mickey\”>

<br>

Last name:<br>

<input type=\”text\” name=\”lastname\” value=\”Mouse\”>

<br><br>

<input type=\”submit\” value=\”Submit\”>

</form>

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

</body>

</html>

运行结果：

2、<select>元素

<select>元素定义下拉列表，示例：

<!DOCTYPE html>

<html>

<body>

<form action=\”/demo/demo_form.asp\”>

<select name=\”cars\”>

<option value=\”volvo\”>Volvo</option>

<option value=\”saab\”>Saab</option>

<option value=\”fiat\”>Fiat</option>

<option value=\”audi\”>Audi</option>

</select>

<br><br>

<input type=\”submit\”>

</form>

</body>

</html>

运行结果：

3、<fieldset>元素

<fieldset>元素组合表单中的相关数据

<legend>元素为<fieldset>元素定义标题，示例：

<!DOCTYPE html>

<html>

<body>

<form action=\”/demo/demo_form.asp\”>

<fieldset>

<legend>Personal information:</legend>

First name:<br>

<input type=\”text\” name=\”firstname\” value=\”Mickey\”>

<br>

Last name:<br>

<input type=\”text\” name=\”lastname\” value=\”Mouse\”>

<br><br>

<input type=\”submit\” value=\”Submit\”>

</fieldset>

</form>

</body>

</html>

运行结果：

4、<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）、示例：

<!DOCTYPE html>

<html>

<body>

<form>

<textarea name=\”message\” rows=\”10\” cols=\”30\”>

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

运行结果：

5、HTML5<datalist>元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性，示例：

<!DOCTYPE html>

<html>

<body>

<form action=\”/demo/demo_form.asp\”>

<input list=\”browsers\” name=\”browser\”>

<datalist id=\”browsers\”>

<option value=\”Internet Explorer\”>

<option value=\”Firefox\”>

<option value=\”Chrome\”>

<option value=\”Opera\”>

<option value=\”Safari\”>

</datalist>

<input type=\”submit\”>

</form>

</body>

</html>

运行结果：

四、HTML表单输入类型

<input>中的type：

输入限制：

这就是有关HTML表单的大概内容了，希望这篇HTML的表单及其input输入类型的知识点能对大家有所帮助。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科