《HTML康复训练》之html表单

简介: 前言🍀作者简介:吉师散养学生,为挣钱努力拼搏的一名小学生。

前言

🍀作者简介:吉师散养学生,为挣钱努力拼搏的一名小学生。


表单标签

昨天发了一篇关于dos的文章,在写某段文字的时候,为了凸显自己丰富的学识(不是,我想用html实现如下图的效果9ca8519f217c4d6caa80f2f854866c01.png

结果我居然忘了该怎么写,只能用python顶了一下。

查阅相关资料,知晓是表单的知识,主要通过以下代码来实现。

9473fc18fbd543aeb04e3afac82f4709.png<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<form action=''>

 用户信息:<input type='text' placeholder='请输入用户名'>

</form>

 

</body>

</html>

由代码可知,,主要是通过input中的placeholder标签实现的


定义和用法

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。


该提示会在输入字段为空时显示,并会在字段获得焦点时消失。


注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。

<input> 元素

<input> 元素是最重要的表单元素

<input> 元素有很多形态,根据不同的 type 属性。

这是本章中使用的类型:

类型 描述
text 定义常规文本输入。
radio 定义单选按钮输入(选择多个选择之一)
submit 定义提交按钮(提交表单)

文本输入

<input type="text"> 定义用于文本输入的单行输入字段:

实例

<form>

First name:<br>

<input type="text" name="firstname">

<br>

Last name:<br>

<input type="text" name="lastname">

</form>

目录
相关文章
|
4月前
|
数据安全/隐私保护 UED
HTML表单
HTML表单
37 1
|
1天前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
1天前
|
移动开发 前端开发 JavaScript
HTML 表单和输入详解
HTML 表单是收集用户输入的关键组件,包括多种输入控件如文本框、单选框、复选框、下拉列表等。表单由 `&lt;form&gt;` 标签定义,常用属性有 `action` 和 `method`。输入控件如 `&lt;input&gt;` 和 `&lt;select&gt;` 可实现不同类型的用户输入,而 `&lt;button&gt;` 用于提交表单。HTML5 还提供了表单验证功能,如 `required` 和 `pattern` 属性,确保输入的有效性。结合 JavaScript 可实现更复杂的表单逻辑。掌握表单是前端开发的基础技能之一。
|
1月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
23天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
33 4
|
29天前
|
前端开发
酷炫表单,触感未来:HTML与CSS动画的创新应用!
酷炫表单,触感未来:HTML与CSS动画的创新应用!
|
3月前
|
Web App开发 前端开发 Java
基于Spring3 MVC实现基于HTML form表单文件上传
基于Spring3 MVC实现基于HTML form表单文件上传
40 7
基于Spring3 MVC实现基于HTML form表单文件上传
|
3月前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
|
3月前
|
Python
HTML表单
【6月更文挑战第13天】HTML表单。
28 7