snipt

Ctrl+h for KB shortcuts

HTML

Foundation - Form

<form>
  <fieldset>
    <legend>Fieldset</legend>

    <div class="row">
      <div class="large-12 columns">
        <label>Input Label</label>
        <input type="text" placeholder="large-12.columns">
      </div>
    </div>

    <div class="row">
      <div class="large-4 columns">
        <label>Input Label</label>
        <input type="text" placeholder="large-4.columns">
      </div>
      <div class="large-4 columns">
        <label>Input Label</label>
        <input type="text" placeholder="large-4.columns">
      </div>
      <div class="large-4 columns">
        <div class="row collapse">
          <label>Input Label</label>
          <div class="small-9 columns">
            <input type="text" placeholder="small-9.columns">
          </div>
          <div class="small-3 columns">
            <span class="postfix">.com</span>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        <label>Textarea Label</label>
        <textarea placeholder="small-12.columns"></textarea>
      </div>
    </div>

  </fieldset>
</form>

Description

Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage — they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile:

You can size inputs using column sizes, like .large-6, .small-6.
You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.
https://snipt.net/embed/12db471ff882abeb70f119af157c4d29/
/raw/12db471ff882abeb70f119af157c4d29/
12db471ff882abeb70f119af157c4d29
html
HTML
42
2019-08-26T04:17:35
True
False
False
Jul 01, 2013 at 03:40 PM
/api/public/snipt/66185/
foundation-form
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a> <a href="#L-34">34</a> <a href="#L-35">35</a> <a href="#L-36">36</a> <a href="#L-37">37</a> <a href="#L-38">38</a> <a href="#L-39">39</a> <a href="#L-40">40</a> <a href="#L-41">41</a> <a href="#L-42">42</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="p">&lt;</span><span class="nt">form</span><span class="p">&gt;</span> </span><span id="L-2"><a name="L-2"></a> <span class="p">&lt;</span><span class="nt">fieldset</span><span class="p">&gt;</span> </span><span id="L-3"><a name="L-3"></a> <span class="p">&lt;</span><span class="nt">legend</span><span class="p">&gt;</span>Fieldset<span class="p">&lt;/</span><span class="nt">legend</span><span class="p">&gt;</span> </span><span id="L-4"><a name="L-4"></a> </span><span id="L-5"><a name="L-5"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;row&quot;</span><span class="p">&gt;</span> </span><span id="L-6"><a name="L-6"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;large-12 columns&quot;</span><span class="p">&gt;</span> </span><span id="L-7"><a name="L-7"></a> <span class="p">&lt;</span><span class="nt">label</span><span class="p">&gt;</span>Input Label<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span><span id="L-8"><a name="L-8"></a> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;large-12.columns&quot;</span><span class="p">&gt;</span> </span><span id="L-9"><a name="L-9"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-10"><a name="L-10"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-11"><a name="L-11"></a> </span><span id="L-12"><a name="L-12"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;row&quot;</span><span class="p">&gt;</span> </span><span id="L-13"><a name="L-13"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;large-4 columns&quot;</span><span class="p">&gt;</span> </span><span id="L-14"><a name="L-14"></a> <span class="p">&lt;</span><span class="nt">label</span><span class="p">&gt;</span>Input Label<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span><span id="L-15"><a name="L-15"></a> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;large-4.columns&quot;</span><span class="p">&gt;</span> </span><span id="L-16"><a name="L-16"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-17"><a name="L-17"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;large-4 columns&quot;</span><span class="p">&gt;</span> </span><span id="L-18"><a name="L-18"></a> <span class="p">&lt;</span><span class="nt">label</span><span class="p">&gt;</span>Input Label<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span><span id="L-19"><a name="L-19"></a> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;large-4.columns&quot;</span><span class="p">&gt;</span> </span><span id="L-20"><a name="L-20"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-21"><a name="L-21"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;large-4 columns&quot;</span><span class="p">&gt;</span> </span><span id="L-22"><a name="L-22"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;row collapse&quot;</span><span class="p">&gt;</span> </span><span id="L-23"><a name="L-23"></a> <span class="p">&lt;</span><span class="nt">label</span><span class="p">&gt;</span>Input Label<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span><span id="L-24"><a name="L-24"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;small-9 columns&quot;</span><span class="p">&gt;</span> </span><span id="L-25"><a name="L-25"></a> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;small-9.columns&quot;</span><span class="p">&gt;</span> </span><span id="L-26"><a name="L-26"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-27"><a name="L-27"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;small-3 columns&quot;</span><span class="p">&gt;</span> </span><span id="L-28"><a name="L-28"></a> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;postfix&quot;</span><span class="p">&gt;</span>.com<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> </span><span id="L-29"><a name="L-29"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-30"><a name="L-30"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-31"><a name="L-31"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-32"><a name="L-32"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-33"><a name="L-33"></a> </span><span id="L-34"><a name="L-34"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;row&quot;</span><span class="p">&gt;</span> </span><span id="L-35"><a name="L-35"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;large-12 columns&quot;</span><span class="p">&gt;</span> </span><span id="L-36"><a name="L-36"></a> <span class="p">&lt;</span><span class="nt">label</span><span class="p">&gt;</span>Textarea Label<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span> </span><span id="L-37"><a name="L-37"></a> <span class="p">&lt;</span><span class="nt">textarea</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;small-12.columns&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">textarea</span><span class="p">&gt;</span> </span><span id="L-38"><a name="L-38"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-39"><a name="L-39"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-40"><a name="L-40"></a> </span><span id="L-41"><a name="L-41"></a> <span class="p">&lt;/</span><span class="nt">fieldset</span><span class="p">&gt;</span> </span><span id="L-42"><a name="L-42"></a><span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span> </span></pre></div> </td></tr></table>
form, forms, foundation