<commit_before>[![Build Status](https://travis-ci.org/mkay581/formjs.svg?branch=master)](https://travis-ci.org/mkay581/formjs)

# FormJS

Allows you easily re-style native form elements across all browsers and falls back to native form elements for mobile devices.
Also, provides a simple API to manipulate form elements with javascript. Supports IE10+, all modern browsers, and mobile.

UI Elements include:

 * Checkboxes
 * Button Toggles
 * Input Fields
 * Dropdowns
 * Entire forms

## Usage

### Styling form elements

Let's say you wanted to style a dropdown menu with the following html:

```html
<select>
    <option value="MD">Maryland</option>
    <option value="VA" selected>Virginia</option>
    <option value="DC">Washington, DC</option>
</select>
```

With this library, you can do this:

```javascript
var dropdown = new Dropdown({
    el: document.getElementsByTagName('select')[0]
});
```

Which will add the following adjacent html into the DOM:

```html
<div class="dropdown-container">
    <div class="dropdown-value-container">Virginia</div>
    <div class="dropdown-option-container">
        <div class="dropdown-option" data-value="MD">Maryland</div>
        <div class="dropdown-option dropdown-option-selected" data-value="VA">Virginia</div>
        <div class="dropdown-option" data-value="DC">Washington, DC</div>
    </div>
</div>
```

Then you can style the dropdown using CSS.


### Programmatically change the element's value

Each class comes with a set of utility methods so you can change the elements via JS. Using the example above, you
could do the following:

```javascript
// set the selected value programmatically
dropdown.setValue('DC');

// get the new data value
dropdown.getValue(); // => "DC"<commit_msg>tweaking readme to reflect latest dropdown changes<commit_after>[![Build Status](https://travis-ci.org/mkay581/formjs.svg?branch=master)](https://travis-ci.org/mkay581/formjs)

# FormJS

Allows you easily re-style native form elements across all browsers and falls back to native form elements for mobile devices.
Also, provides a simple API to manipulate form elements with javascript. Supports IE10+, all modern browsers, and mobile.

UI Elements include:

 * Checkboxes
 * Button Toggles
 * Input Fields
 * Dropdowns
 * Entire forms

## Usage

### Styling form elements

Let's say you wanted to style a dropdown menu with the following html:

```html
<select>
    <option value="MD">Maryland</option>
    <option value="VA" selected>Virginia</option>
    <option value="DC">Washington, DC</option>
</select>
```

With this library, you can do this:

```javascript
var dropdown = new Dropdown({
    el: document.getElementsByTagName('select')[0]
});
```

Which will change your HTML into this:

```html
<div class="dropdown-wrapper">
    <div class="dropdown-container">
        <div class="dropdown-value-container">Virginia</div>
        <div class="dropdown-option-container">
            <div class="dropdown-option" data-value="MD">Maryland</div>
            <div class="dropdown-option dropdown-option-selected" data-value="VA">Virginia</div>
            <div class="dropdown-option" data-value="DC">Washington, DC</div>
        </div>
    </div>
    <select>
        <option value="MD">Maryland</option>
        <option value="VA" selected>Virginia</option>
        <option value="DC">Washington, DC</option>
    </select>
</div>
```

Then you can style the dropdown using CSS (and just hide the `<select>` element).


### Programmatically change the element's value

Each class comes with a set of utility methods so you can change the elements via JS. Using the example above, you
could do the following:

```javascript
// set the selected value programmatically
dropdown.setValue('DC');

// get the new data value
dropdown.getValue(); // => "DC"
{'fraction_non_alphanumeric': 0.12627986348122866, 'fraction_numerical': 0.0047256497768443165, 'mean_word_length': 4.1978171896316505, 'pattern_counts': {'":': 0, '<': 54, '<?xml version=': 0, '>': 56, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1233641', 'n_tokens_mistral': 1160, 'n_tokens_neox': 1073, 'n_words': 375}