少有人走的路

（1）文本输入

text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url,  week

    <form>
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="medium-6 cell">
                    <label>
                        Input Password
                        <input type="password" placeholder=".medium-6.cell">
                    </label>
                </div>
                <div class="medium-6 cell">
                    <label>
                        Input Date
                        <input type="date" placeholder=".medium-6.cell">
                    </label>
                </div>
                <div class="medium-6 cell">
                    <label>
                        Input Email
                        <input type="email" placeholder="xxx@">
                    </label>
                </div>
            </div>
        </div>
    </form>

（2）数值输入

<label>
  How many puppies?
  <input type="number" value="100">
</label>

（3）可以手动大小的文本区域

<label>
  What books did you read over summer break?
  <textarea placeholder="None"></textarea>
</label>

（4）选择菜单，相当于C#桌面程序的Combox控件

<label>Select Menu
  <select>
    <option value="husker">Husker</option>
    <option value="starbuck">Starbuck</option>
    <option value="hotdog">Hot Dog</option>
    <option value="apollo">Apollo</option>
  </select>
</label>

如果改为<select multiple> 则相当于C#的ListBox控件

（5）检查框与radio按钮

<div class="grid-x grid-padding-x">
  <fieldset class="large-5 cell">
    <legend>Choose Your Favorite</legend>
    <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
    <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
    <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
  </fieldset>
  <fieldset class="large-7 cell">
    <legend>Check these out</legend>
    <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
    <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
    <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
  </fieldset>
</div>

（6）类似C#的groupbox

<fieldset class="fieldset">
  <legend>Check these out</legend>
  <input id="checkbox12" type="checkbox"><label for="checkbox12">Checkbox 1</label>
  <input id="checkbox22" type="checkbox"><label for="checkbox22">Checkbox 2</label>
  <input id="checkbox32" type="checkbox"><label for="checkbox32">Checkbox 3</label>
</fieldset>

（7）帮助文本

<label>Password
  <input type="password" aria-describedby="passwordHelpText">
</label>
<p class="help-text" id="passwordHelpText">Your password must have at least 10 characters, a number, and an Emoji.</p>

（8）类似C#中 lable+一个textbox

有时，您需要一个在输入左侧带有标签的表单。小菜一碟！

可以将标签放在输入左侧的其他单元格或列中。

然后使用类.text right或.foat right（或添加text-align:right）重新对齐标签。

    <form>
        <div class="grid-x grid-padding-x">
            <div class="small-3 cell">
                <label for="right-label" class="text-right">用户名：</label>
            </div>
            <div class="small-9 cell">
                <input type="text" id="right-label" placeholder="输入用户名">
            </div>
        </div>
    </form>

加一个.middle可以居中对齐：

    <form>
        <div class="grid-x grid-padding-x">
            <div class="small-3 cell">
                <label for="right-label" class="text-right middle">用户名：</label>
            </div>
            <div class="small-9 cell">
                <input type="text" id="right-label" placeholder="输入用户名">
            </div>
        </div>
    </form>

（9）内联Lable和按钮

<div class="input-group">
  <span class="input-group-label">$</span>
  <input class="input-group-field" type="number">
  <div class="input-group-button">
    <input type="submit" class="button" value="Submit">
  </div>
</div>

（10）上传文件

<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">

点击后打开

本文出自勇哥的网站《少有人走的路》wwww.skcircle.com，转载请注明出处！讨论可扫码加群：