kapi
/
start0.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
    <script src="semantic/dist/semantic.min.js"></script>
    <script type="text/javascript">
    var semantic = {}
    semantic.validateForm = {};
    // ready event
    semantic.validateForm.ready = function() {
      // selector cache
      var $codeDropdown = $('.existing.code .dropdown'),$dropdown = $('.main.container .ui.dropdown').not($codeDropdown),
        // alias
        handler;
      // event handlers
      handler = { };
      $dropdown.dropdown();
    };


    // attach ready event
    $(document).ready(semantic.validateForm.ready);
    </script>
  </head>
  <body class="main container" style="padding:20px">
    <form class="ui form">
      <div class="field">
        <label>接口名称</label>
        <input type="text" name="first-name" placeholder="First Name">
      </div>
      <div class="field">
        <label>功能</label>
        <input type="text" name="last-name" placeholder="Last Name">
      </div>
      <div class="two fields">
        <div class="field">
          <label>分组</label>
          <select class="ui fluid search dropdown" name="card[expire-month]">
            <option value="">Month</option>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
          </select>
        </div>
        <div class="field">
          <label>Http Method</label>
          <select class="ui fluid search dropdown" name="card[expire-month]">
            <option value="">Month</option>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
          </select>
        </div>
      </div>
      <div class="field">
        <label>URL</label>
        <input type="text" name="last-name" placeholder="Last Name">
      </div>

      <div class="field">
        <label>参数</label>
        <button class="ui right labeled icon button"><i class="right arrow icon"></i> Add </button>
      </div>

      <div class="field">
        <table class="ui celled striped table">

          <tbody>
            <thead>
              <tr>
                <th >参数名称</th>
                <th >参数类型</th>
                <th >可选性</th>
                <th >描述</th>
              </tr>
            </thead>
            <tr>
              <td class="collapsing"><i class="folder icon"></i> node_modules木木s </td>
              <td class="right aligned collapsing">Initial commit</td>
              <td class="right aligned collapsing">Initial commit</td>
              <td >10 hours ago</td>
            </tr>
            <tr>
              <td class="collapsing"><i class="folder icon"></i> node_modules </td>
              <td class="right aligned collapsing">Initial commit</td>
              <td class="right aligned collapsing">Initial commit</td>
              <td >10 hours ago</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="four fields">
        <div class="field">
          <label>返回参数类型</label>
          <select class="ui fluid search dropdown" name="card[expire-month]">
            <option value="">Month</option>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
          </select>
        </div>
      </div>
      <div class="field">
        <label>返回参数</label>
        <textarea rows="20" ></textarea>
      </div>
      <div class="field">
        <label>备注</label>
        <textarea rows="4" ></textarea>
      </div>
      <button class="ui button" type="submit">Submit</button>
    </form>
  </body>
</html>