JB Framework

Input

Text

<p>
    <input type="text" value="Lorem ipsum">
    <input disabled type="text" value="Lorem ipsum">
    <input readonly type="text" value="Lorem ipsum">
    <input class="invalid" type="text" value="Lorem ipsum">
</p>

Email

<p>
    <input type="email" value="test@example.org">
    <input disabled type="email" value="test@example.org">
    <input readonly type="email" value="test@example.org">
    <input class="invalid" type="email" value="test@example.org">
</p>

Number

<p>
    <input type="number" value="47">
    <input disabled type="number" value="47">
    <input readonly type="number" value="47">
    <input class="invalid" type="number" value="47">
</p>

Password

<p>
    <input type="password" value="abc123">
    <input disabled type="password" value="abc123">
    <input readonly type="password" value="abc123">
    <input class="invalid" type="password" value="abc123">
</p>

Search

<p>
    <input type="search" value="widgets">
    <input disabled type="search" value="widgets">
    <input readonly type="search" value="widgets">
    <input class="invalid" type="search" value="widgets">
</p>

Telephone

<p>
    <input type="tel" value="(555) 867-5309">
    <input disabled type="tel" value="(555) 867-5309">
    <input readonly type="tel" value="(555) 867-5309">
    <input class="invalid" type="tel" value="(555) 867-5309">
</p>

URL

<p>
    <input type="url" value="https://example.org">
    <input disabled type="url" value="https://example.org">
    <input readonly type="url" value="https://example.org">
    <input class="invalid" type="url" value="https://example.org">
</p>

Placeholder

<p>
    <input placeholder="Placeholder" type="text">
    <input disabled placeholder="Placeholder" type="text">
    <input readonly placeholder="Placeholder" type="text">
    <input class="invalid" placeholder="Placeholder" type="text">
</p>