html表单边框怎么加颜色？html form标签的边框颜色实例

2024-04-17 00:56:48

本篇文章主要的讲述了HTML表单的边框加颜色，可以更改任何你想要的颜色都可以，有实例解析，方便观看，接下来让我们一起来看看这篇关于HTML表单的边框颜色的文章吧

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

首先我们说的是表单的边框怎么添加颜色？

<input>标签用于搜集用户信息。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

提示：在 HTML 中，<input> 标签没有结束标签；在 XHTML 中，<input> 标签必须被正确地关闭。

提示：请使用 label 元素为某个表单控件定义标签。

先来看一个HTML表单边框的使用实例：

<form action="form_action.asp" method="get">请输用户名: <input type="text" name="fname" /></br>重复用户名: <input type="text" name="lname" /></br><input type="submit" value="提交" />
</form>

这个在浏览器中显示的效果为：

这个效果相信我们在很多时候都见过，也用过不少次。

这是还没加入边框的，现在说说怎么加边框：

我们这篇文章用的是css样式来设置边框线，比如添加这样样式：

<style>
form{border: 3px solid red;
}
</style>

里面的效果就出来，我们一起把全部的代码都敲出来吧：

<html>
<head>
<style>
form{border: 3px solid red;
}
</style>
</head>
<form action="form_action.asp" method="get">请输用户名: <input type="text" name="fname" /></br>重复用户名: <input type="text" name="lname" /></br><input type="submit" value="提交" />
</form>
</html>

现在来看看效果，有没有3像素的边框：

如图，添加了三个像素的红色边框把表单都包裹起来了，这个代码是不是也很简单，这个我们就要可以用来调整边框线的颜色啊，和像素调整都可以。

这篇关于HTML表单的边框的文章到这也就结束了，更多问题可以关注我！！！

html表单边框怎么加颜色？html form标签的边框颜色实例相关推荐

第四篇 HTML 表单深入了解、注释和a标签的运用
表单深入了解.注释和a标签的运用注释,HTML中的注释格式: 开头  例子: <!-- <div>我被注释了</div> - ...
jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
java 获取js元素,表单元素值获取方式js及java方式的简单实例
表单元素值获取方式js及java方式的简单实例这里有新鲜出炉的 Javascript 教程,程序狗速度看过来! JavaScript 客户端脚本语言 Javascript 是一种由 Netscape ...
elementui 按钮表单_仿ElementUI实现一个Form表单的实现代码
使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 一. 目标仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Inp ...
ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
ExtJS表单提交与加载全攻略
ExtJS用formPanel来做为表单元素的容器.默认情况下,是使用Ajax异步提交.接下来,对formPanel的提交跟加载,做个小总结. 先来看布局代码 1 var frm 2 Ext.onR ...
为什么上传文件的表单里要加个属性enctype
上传文件的表单中<form>要加属性enctype="multipart/form-data",很多人只是死记硬背知道上传表单要这么写,知其然而不知其所以然.那到底为什 ...
html 表格，列表，表单，select和下拉选框，textarea多行文本域，label关联控件，表单，浮动框架，结构化标签
1. 表格表格的语法 (1) table标签: 表示表格的开始和结束.表格的所有内容都需要写在这一对标签里 (2) tr标签: 表示表格中的一行 table row (3) td标签:要写在tr中, ...
form表单的使用，iframe内嵌标签
一.form表单,表单名称使用name action 把当前表单中的数据提交到哪个程序去处理后端功能接口 method 表单的提交方式常用的两种方式, get:可以缓存到浏览器中,有长度限制(204 ...

最新文章

热门文章