build www.ouwan.com global form element

基本用法

Email address

Password

File input

Example block-level help text here.

Check me out

Option one is this and that—be sure to include why it's great

Option two is disabled

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

<form>
    <fieldset>
        <legend class="p30 f18 font-bold font-blue tc">基本用法</legend>
        <div class="form-group">
            <label class="form-label" for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
            <label class="form-label" for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
            <label class="form-label" for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="form-help-block">Example block-level help text here.</p>
        </div>
        <div class="form-checkbox">
            <label>
                <input type="checkbox"> Check me out
            </label>
        </div>
        <div class="form-radio">
            <label>
                <input type="radio"> Check me out
            </label>
        </div>
        <div class="checkbox">
            <label class="form-label">
                <input type="checkbox" value="">
                Option one is this and that&mdash;be sure to include why it's great
            </label>
        </div>
        <div class="checkbox disabled">
            <label class="form-label">
                <input type="checkbox" value="" disabled>
                Option two is disabled
            </label>
        </div>

        <div class="radio">
            <label class="form-label">
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                Option one is this and that&mdash;be sure to include why it's great
            </label>
        </div>
        <div class="radio">
            <label class="form-label">
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Option two can be something else and selecting it will deselect option one
            </label>
        </div>
        <div class="radio disabled">
            <label class="form-label">
                <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
                Option three is disabled
            </label>
        </div>
        <input class="btn btn-style8 btn-xl" type="submit" value="submit">
        <input class="btn btn-style8 btn-lg" type="submit" value="submit">
        <input class="btn btn-style8" type="submit" value="submit">
        <input class="btn btn-style8 btn-sm" type="submit" value="submit">
    </fieldset>
</form>

<form class="form-inline">
    <fieldset>
        <legend class="p30 f18 font-bold font-blue tc">行内显示</legend>
        <div class="form-group">
            <label class="form-label" for="exampleInputName2">Name</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group">
            <label class="form-label" for="exampleInputEmail2">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <input class="btn btn-style8 " type="submit" value="submit">
    </fieldset>
</form>

<form class="form-inline">
    <fieldset>
        <legend class="p30 f18 font-bold font-blue tc">隐藏输入框标签Label</legend>
        <div class="form-group">
            <label class="form-sr-only" for="exampleInputEmail3">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
        </div>
        <div class="form-group">
            <label class="form-sr-only" for="exampleInputPassword3">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
        </div>
        <div class="form-checkbox">
            <label>
                <input type="checkbox"> Remember me
            </label>
        </div>
        <input class="btn btn-style8 " type="submit" value="submit">
    </fieldset>
</form>

<form class="form-horizontal">
    <fieldset>
        <legend class="p30 f18 font-bold font-blue tc">水平显示</legend>
        <div class="form-group row-fluid">
            <label class="span3 form-label">Email</label>
            <div class="span6">
                <p class="form-control-static">email@example.com</p>
            </div>
        </div>
        <div class="form-group row-fluid">
            <label class="form-label span3" for="inputEmail3" >Email</label>
            <div class="span6">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
        </div>
        <div class="form-group row-fluid">
            <label class="form-label span3" for="inputPassword3" >Password</label>
            <div class="span9">
                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
        </div>
        <div class="form-group row-fluid">
            <div class="offset3 span9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group row-fluid">
            <div class="offset3 span9">
                <input class="btn btn-style8 btn-xl" type="submit" value="submit">
            </div>
        </div>
    </fieldset>
</form>

<form>
    <fieldset>
        <legend class="db p30 f18 font-bold font-blue tc">水平checkbox</legend>
        <div class="form-group">
            <label class="form-checkbox-inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
            </label>
            <label class="form-checkbox-inline">
                <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
            </label>
            <label class="form-checkbox-inline">
                <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
            </label>

            <label class="form-radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
            </label>
            <label class="form-radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
            </label>
            <label class="form-radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
            </label>
        </div>
        <div class="form-group">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </fieldset>
</form>

<form>
    <fieldset>
        <legend class="db p30 f18 font-bold font-blue tc">控件大小</legend>
        <input class="form-control form-control-lg" type="text" placeholder=".input-lg">
        <input class="form-control" type="text" placeholder="Default input">
        <input class="form-control form-control-sm" type="text" placeholder=".input-sm">

        <select class="form-control form-control-lg">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <select class="form-control form-control-sm">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </fieldset>
</form>