欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

Html表单边框怎么加颜色?Html form标签的边框颜色实例

发布时间:2019-05-28  编辑:杨雨个人博客网站   点击:   

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

 

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

<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>

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

tuyi.png

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

这是还没加入边框的,现在说说怎么加边框:

我们这篇文章用的是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像素的边框:

tuer.png

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

这篇关于HTML表单的边框的文章到这也就结束了(想学更多的编程知识,欢迎来PHP中文网学习),有问题的可以在下方提问。

 

本文地址:http://itbyc.com/web/html5/20785.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1