Form constructor

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.2.1/riot+compiler.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
      <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">EDIT</button>



  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Crear Filtro</h4>
        </div>
        <div class="modal-body">
              <app/>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">
                    Save changes
                </button>
          </div>
      </div>
      
    </div>
  </div>

<script  type="riot/tag">
  <raw>
      riot.mountTo(this.root, opts.content.tag, opts.content)
  </raw>
    
  <string>
     <input type="text" class="form-control" name="{ opts.name }" />
  </string>
    
  <choose>
      <select class="form-control"  name="{ opts.name }">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
  </choose>
    
  <app>
      <form class="form-inline" role="form">
        <div class="form-group">
          <label  for="fieldName">Nombre:</label>
          <input type="text" class="form-control" id="fieldName" />
        </div>
        <div class="form-group">
          <label  for="inputType">Tipo:</label>
          <select...

CSS

#container {
  width: 100%;
  padding: 15px;
}
.remove {
  float: right;
  margin-right: 20px;
  color: #aa0000;
  font-weight: bold;
  font-size: 1.1em;
  cursor: pointer;
}

JavaScript

riot.mount('app')