表单



收集用户输入信息的标准方法就是使用表单了。所以用户与表单交互时的动画效果与流畅性就显得至关重要了。

输入框

文本输入框允许用户输入信息。 输入框的边框必须简单明了,能让用户一眼看出输入位置。你要设置一个使用.input-field的div包裹着input和label标签。这两个标签能帮助JQuery对其应用动画效果。 另外,动画效果只会应用在Input和Textarea表单元素中。

如果你不想使用Green和Red验证,那么移除 validate class 就行。



  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <input placeholder="Placeholder" id="first_name" type="text" class="validate">
          <label for="first_name">First Name</label>
        </div>
        <div class="input-field col s6">
          <input id="last_name" type="text" class="validate">
          <label for="last_name">Last Name</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input disabled value="I am not editable" id="disabled" type="text" class="validate">
          <label for="disabled">Disabled</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="password" type="password" class="validate">
          <label for="password">Password</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">Email</label>
        </div>
      </div>
    </form>
  </div>
        

文本预填充

如果你碰到label标签与文本重合的问题, 添加class="active"到label标签上试试。


  <div class="row">
    <div class="input-field col s6">
      <input value="Alvin" id="first_name2" type="text" class="validate">
      <label class="active" for="first_name2">First Name</label>
    </div>
  </div>
        

图标预填充

你可以使用小图标来让输入框显得更加清晰明了。只需在input前添加一个使用了prefix的icon。



  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <i class="mdi-action-account-circle prefix"></i>
          <input id="icon_prefix" type="text" class="validate">
          <label for="icon_prefix">First Name</label>
        </div>
        <div class="input-field col s6">
          <i class="mdi-communication-phone prefix"></i>
          <input id="icon_telephone" type="tel" class="validate">
          <label for="icon_telephone">Telephone</label>
        </div>
      </div>
    </form>
  </div>
        

改变颜色

以下展示了一些关于input标签的CSS模板。通过Sass,你能方便的修改这些变量。


  /* label color */
  .input-field label {
  color: #000;
  }
  /* label focus color */
  .input-field input[type=text]:focus + label {
  color: #000;
  }
  /* label underline focus color */
  .input-field input[type=text]:focus {
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 0 #000;
  }
  /* valid color */
  .input-field input[type=text].valid {
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 0 #000;
  }
  /* invalid color */
  .input-field input[type=text].invalid {
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 0 #000;
  }
  /* icon prefix focus color */
  .input-field .prefix.active {
  color: #000;
  }
        

文本域

文本域提供了一个可伸缩大小的输入框。

文本域会自动根据文本的内容调整大小。


  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <textarea id="textarea1" class="materialize-textarea"></textarea>
          <label for="textarea1">Textarea</label>
        </div>
      </div>
    </form>
  </div>
        

小图标

添加小图标能使文本框看起来更简洁明了



  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <i class="mdi-editor-mode-edit prefix"></i>
          <textarea id="icon_prefix2" class="materialize-textarea"></textarea>
          <label for="icon_prefix2">First Name</label>
        </div>
      </div>
    </form>
  </div>
        

选择框

Select允许用户选择一些指定的选项。


You can add the class browser-default to get the browser default.


  <div class="input-field col s12">
    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
  </div>

  <label>Browser Select</label>
  <select class="browser-default">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
            


禁用

使用disabled属性让整个select不可用。如果在选项上使用,则此选项不可用。


  <label>Materialize Disabled</label>
  <select disabled>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>

  <label>Browser Disabled</label>
  <select class="browser-default" disabled>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
            

初始化

在使用之前必须初始化。另外,如果选择框是动态生成的,则需要再次调用此函数。


  $(document).ready(function() {
    $('select').material_select();
  });
            

单选

当用户必须在一组选项中选择一个,那么就用单选按钮。

添加一组包含着相同name属性的单选按钮。如果想禁用其中的某个,那么使用disabled属性。


  <form action="#">
    <p>
      <input name="group1" type="radio" id="test1" />
      <label for="test1">Red</label>
    </p>
    <p>
      <input name="group1" type="radio" id="test2" />
      <label for="test2">Yellow</label>
    </p>
    <p>
      <input class="with-gap" name="group1" type="radio" id="test3"  />
      <label for="test3">Green</label>
    </p>
    <p>
      <input name="group1" type="radio" id="test4" disabled="disabled" />
      <label for="test4">Brown</label>
    </p>
  </form>
        

选项

使用class="with-gap"能让radio在视觉上有一定的间隙。


  <p>
    <input class="with-gap" name="group3" type="radio" id="test5" checked />
    <label for="test5">Red</label>
  </p>
        

复选框

复选框


  <form action="#">
    <p>
      <input type="checkbox" id="test5" />
      <label for="test5">Red</label>
    </p>
    <p>
      <input type="checkbox" id="test6" checked="checked" />
      <label for="test6">Yellow</label>
    </p>
    <p>
      <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
      <label for="filled-in-box">Filled in</label>
    </p>
    <p>
      <input type="checkbox" id="test7" checked="checked" disabled="disabled" />
      <label for="test7">Green</label>
    </p>
    <p>
      <input type="checkbox" id="test8" disabled="disabled" />
      <label for="test8">Brown</label>
    </p>
  </form>
        

开关


  <div class="switch">
    <label>
      Off
      <input type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>


  <div class="switch">
    <label>
      Off
      <input disabled type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>
        

文件上传

我们提供了一套优化后的上传文件框。

File

  <form action="#">
    <div class="file-field input-field">
      <input class="file-path validate" type="text"/>
      <div class="btn">
        <span>File</span>
        <input type="file" />
      </div>
    </div>
  </form>
        

滑块

使用一个带数值的滑块。这个是0-100。


  <form action="#">
    <p class="range-field">
      <input type="range" id="test5" min="0" max="100" />
    </p>
  </form>
        

日期选择

我们重写了了pickdate.js,以使其符合Materialize样式。


  <input type="date" class="datepicker">
        

初始化

或许,并不是所有的pickdate.js选项能在本框架中使用。


  $('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15 // Creates a dropdown of 15 years to control year
  });
        

字符计数

在使用限制长度的文本框中,你可以使用字符计数模块。



  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <input id="input_text" type="text" length="10">
          <label for="input_text">Input text</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <textarea id="textarea1" class="materialize-textarea" length="120"></textarea>
          <label for="textarea1">Textarea</label>
        </div>
      </div>
    </form>
  </div>