How to define NodeSpec for forms

1

I want to define NodeSpec for forms, like

<form>
     <div class="form-group">
         <label>title</label>
         <input type="text">
     </div>
     <div class="form-group">
         <label>name</label>
         <input type="text">
         <input type="text">             <!-- multiple inputs -->
     </div>     
     <div class="form-group">
         <label>color</label>
         <button type="button">choose</button>      <!-- button or textarea instead -->
     </div>                  
</form

I defined a NodeSpec:

    form: {
      content: 'formitem+',
      isolating: true,
      parseDOM: [{tag: 'form'}],
      toDOM() { return ['form',  0] }
    },
    'formitem': {                                                                      
      content: 'label value',
      isolating: true,
      parseDOM: [{context: 'form/', tag: 'div'}],
      toDOM() { return ['div', 0] }
    },
    'label': {
      content: 'text*',
      selectable: false,                              // ???
      draggable: false,
      parseDOM: [{context: 'form/formitem/', tag: 'label'}],
      toDOM() { return ['label', 0] }
    },
    'value': {
      content: 'text*',
      parseDOM: [{context: 'form/formitem/', tag: '[type]'}],
      toDOM() { return ['input', 0] }                // ???
    }

It parses the form above. But I still have some problems (indicated by ???).

  1. In the editor, the labels are still selectable and editable. How could I config it to be readonly?
  2. How could parse multiple value (input/button/textarea) node and generate corresponding dom node?