infieldLabel

KO | EN

gitlite — search

#javascript #hacktoberfest #react #golang #machine-learning #linux #docker #macos #java #windows #kubernetes #pytorch #ios #mcp

(★ 94)

Making infield form labels suck less.

infieldLabel 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# infieldLabel

infieldLabel is a jQuery plugin that creates a compact, text-over-input, form layout while using semabtic HTML and preserving usability and accessibility.

Check out the demo: http://ten1seven.github.io/infieldLabel/.
Read the full post: http://viget.com/inspire/making-infield-form-labels-suck-less-2.

## How it works

- Using good HTML structure, the label is positioned over the input.
- When the input receives focus, the label is moved to above the input as a tooltip.
- If the input contains text, the label is hidden.
- Hidden labels re-appear above the input any time it receives focus.

## Installing

Download the file directly...

or install via Bower...

```shell
bower install infieldLabel
```

or install via NPM...

```shell
npm install infieldLabel
```

## Usage

- Build input fields like normal using a label.
- Wrap the label and input in a container, like a span, and give it the class of `infield-label`.

```html
<p>
  <span class="infield-label">
    <label for="myLabel">My Label</label>
    <input type="text" name="myLabel" id="myLabel" class="input" size="50">
  </span>
</p>
````

- Include jQuery, jquery.infieldLabel.js and jquery.infieldLabel.css.
- Call infieldLabel.

```html
<link href="jquery.infieldLabel.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery.infieldLabel.js"></script>
<script>
  $(function() {
    $('.infield-label').infieldLabel();
  });
</script>
```

## Options

- `focusClass`: Class applied to wrapper when input receives focus.
- `hideClass`: Class applied to wrapper when input contains text.

infieldLabel

infieldLabel 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

infieldLabel

infieldLabel 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README