- HTML CSS Reference/HTML Tag Reference/legend
- «legend» CSS Attributes and JavaScript Style Properties
- «legend» Event Handlers
- HTML Tag
- Syntax
- Examples
- Basic tag usage
- Add Styles
- Attributes
- Global Attributes
- Event Handlers
- The Magical Use of Uncommon Labels Fieldset and Legend
- Learn about fieldset and legend
- Controls the position and style of legend
- Application scenario — horizontal lines on both sides of the title
- border nested text
- Finally
HTML CSS Reference/HTML Tag Reference/legend
«legend» CSS Attributes and JavaScript Style Properties
Names noted with an asterisk (*) are JavaScript properties only. +—————-+—————————————————————+ | CSS |!important :first-letter | | Attributes |:first-line accelerator | | and |background background-attachment | | JavaScript |background-color background-image | | Style |background-position background-position-x | | Properties |background-position-y background-repeat | | |behavior bottom | | |clear clip | | |color cursor | | |direction display | | |filter float | | |font font-family | | |font-size font-style | | |font-variant font-weight | | |hasLayout(*) height | | |layout-flow layout-grid | | |layout-grid-mode left | | |letter-spacing line-break | | |line-height overflow | | |overflow-x overflow-y | | |padding padding-bottom | | |padding-left padding-right | | |padding-top pixelBottom(*) | | |pixelHeight(*) pixelLeft(*) | | |pixelRight(*) pixelTop(*) | | |pixelWidth(*) posBottom(*) | | |posHeight(*) position | | |posLeft(*) posRight(*) | | |posTop(*) posWidth(*) | | |right styleFloat(*) | | |text-autospace text-decoration | | |text-justify text-overflow | | |text-transform text-underline-position | | |textDecorationBlink(*) textDecorationLineThrough(*) | | |textDecorationNone(*) textDecorationOverline(*) | | |textDecorationUnderline(*) top | | |unicode-bidi visibility | | |white-space width | | |word-break word-spacing | | |word-wrap writing-mode | | |z-index zoom | +—————-+—————————————————————+
«legend» Event Handlers
+—————-+—————————————————————+ | Event |onActivate onAfterUpdate | | Handlers |onBeforeActivate onBeforeCopy | | |onBeforeCut onBeforeDeactivate | | |onBeforeEditFocus onBeforePaste | | |onBeforeUpdate onBlur | | |onClick onContextMenu | | |onControlSelect onCopy | | |onCut onDblClick | | |onDeactivate onDragStart | | |onErrorUpdate onFocus | | |onFocusIn onFocusOut | | |onHelp onKeyDown | | |onKeyPress onKeyUp | | |onLoseCapture onMouseDown | | |onMouseEnter onMouseLeave | | |onMouseMove onMouseOut | | |onMouseOver onMouseUp | | |onMouseWheel onMove | | |onMoveEnd onMoveStart | | |onPaste onPropertyChange | | |onReadyStateChange onResize | | |onResizeEnd onResizeStart | | |onTimeError | +—————-+—————————————————————+
HTML Tag
The HTML tag represents a caption for a element.
The element can make your forms and other elements easier to understand for your users, as it allows them to see what the group of elements is for.
Syntax
The tag is written as with the caption inserted between the start and end tags.
Examples
Basic tag usage
Here’s a basic example to show how the tag can be used.
Add Styles
In this example, we add some styles to the and elements.
Attributes
Attributes can be added to an HTML element to provide more information about how the element should appear or behave.
The element accepts the following attributes.
| Attribute | Description |
|---|---|
| none |
Global Attributes
The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.
- accesskey
- autocapitalize
- class
- contenteditable
- data-*
- dir
- draggable
- hidden
- id
- inputmode
- is
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- part
- slot
- spellcheck
- style
- tabindex
- title
- translate
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handlers
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.
- onabort
- onauxclick
- onblur
- oncancel
- oncanplay
- oncanplaythrough
- onchange
- onclick
- onclose
- oncontextmenu
- oncopy
- oncuechange
- oncut
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragexit
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onformdata
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onlanguagechange
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmouseenter
- onmouseleave
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onpaste
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreset
- onresize
- onscroll
- onsecuritypolicyviolation
- onseeked
- onseeking
- onselect
- onslotchange
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- ontoggle
- onvolumechange
- onwaiting
- onwheel
Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.
The Magical Use of Uncommon Labels Fieldset and Legend
When it comes to
Learn about fieldset and legend
- : The HTML element is used to group control elements in a form
- : a element is built into as the title of the fieldset
In short, fieldset can be used alone to group elements of a form, while legend needs to be used in conjunction with fieldset , in pairs, as the title of the group.
Let’s look at a simple example, the simple HTML and structure are as follows:
Form Name : type="text" placeholder="input Name" /> Password : type="text" placeholder="input Name" /> fieldset border: 1px solid#ddd; padding: 12px; > legend font-size: 18px; padding: 0 10px; > The more interesting point is that if the border border is set for the fieldset , the content inside the legend element will be used as the title of the group, embedded within the border .
Controls the position and style of legend
It is possible to control the position and style of the legend .
For the position, we can control it through margin and the padding of the parent element. If the parent element fieldset does not set padding and legend does not set margin, then legend is positioned at the far left by default.
fieldset border: 1px solid#ddd; // padding: 12px; > legend font-size: 18px; > The initial position of the title can be controlled by changing the margin of the legend or the padding-left of the parent element:
fieldset border: 1px groove #ddd; > legend animation: marginMove 10s infinite alternate; > @keyframes marginMove 100% margin-left: 100px; > > By controlling the padding of legend , you can increase the area of the surrounding elements and make more white space.
Application scenario — horizontal lines on both sides of the title
After understanding the above basic knowledge, we can start a little deeper and think about some interesting application scenarios of the above and .
The most suitable scene I think should be the layout with horizontal lines on both sides of the title. Something like this:
Of course, there are many solutions to this layout, usually using pseudo-elements to generate horizontal lines on the left and right sides, or local overlays through absolute positioning.
Here, using and is done very quickly:
fieldset width: 300px; height: 24px; border: 1px solid transparent; border-top-color: #000; > legend margin: auto; padding: 0 10px; > fieldset only sets the top border, margin: auto positions the title in the middle, and padding controls the margin on both sides. very perfect.
border nested text
In this article — How to Add Text in Borders Using Basic HTML Elements, and also introduces a very interesting usage scenario, nesting text in borders.
Imagine that a element combined with a element can generate a border inlaid text effect. Then, by combining multiple groups and positioning and arranging, you can generate a polygon border with nested text. effect.
The pseudo code is as follows:
class="g-container"> .g-container position: relative; width: 300px; height: 300px; > fieldset position: absolute; width: 300px; height: 300px; border: 10px solid transparent; border-top-color: #000; > legend padding: 0 10px; > fieldset:nth-of-type(2) transform: rotate(90deg); > fieldset:nth-of-type(3) transform: rotate(180deg); > fieldset:nth-of-type(3)>legend transform: rotate(180deg); > fieldset:nth-of-type(4) transform: rotate(-90deg); > The effect diagram is as follows:
Through the combination of multiple and , we can spell out the 4 sides of a container to form a very beautiful border inlay effect.
Animate text by adding animation to legend
legend animation: move 3s infinite linear alternate; > @keyframes move 100% margin-left: 70px; > > Well, based on this, we can generate borders for various N-sided border inlays. Below is a simple attempt at several polygon borders.
Finally
More wonderful CSS technical articles are summarized in my Github — iCSS.
And maybe you will love my CodePen, which has a large number of amazing CSS effects.