MessageML and PresentationML label attribute

[symphony-enrico]

Add label attribute to the following elements:

<text-field>, <textarea>, <select><option>, <person-selector>, <radio>, <checkbox>

MessageML specifications

Attribute name	Optional	Type	Max length	Attribute description
label	true	String	64	Definition of the label that will be displayed on top of the Element DOC

PresentationML specifications

Attribute name	Corresponding MessageML attribute	Notes
<label>	label	The label attribute will be transform as standard tag, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Examples

(Please note that {uniqueLabelId} is a 10 alphanumeric characters short id, url-friendly)

Text Field

<!-- MessageML -->
<messageML>   
  <form id="example">                        
    <text-field label="Username" name="login" pattern="^[a-zA-Z]{3,}$"/>              
    <button name="send-answers" type="action">Submit</button>
  </form>
</messageML>

<!-- PresentationML -->
<div data-format="PresentationML" data-version="2.0"> 
  <form id="example"> 
    <div class="textfield-group">
      <label for="textfield-{uniqueLabelId}">Username</label>
      <input id="textfield-{uniqueLabelId}" type="text" name="login" pattern="^[a-zA-Z]{3,}$"> 
    </div>
    <button type="action" name="send-answers">Submit</button> 
  </form> 
</div>

TextArea

<!-- MessageML -->
<messageML>
  <form id="example">
    <textarea name="justification" pattern="^((?!badword).)*$" label="Justification"/>
    <button name="send-answers" type="action">Submit</button>
  </form>
</messageML>

<!-- PresentationML -->
<div data-format="PresentationML" data-version="2.0"> 
  <form id="example"> 
    <div class="textarea-group">
      <label for="textarea-{uniqueLabelId}">Justification</label>
      <textarea id="textarea-{uniqueLabelId}" name="justification" pattern="^((?!badword).)*$">.     </textarea> 
    </div>
    <button type="action" name="send-answers">Submit</button> 
  </form> 
</div>

Dropdown

<!-- MessageML -->
<messageML>
  <form id="example">
    <select name="cities" label="Cities">     
      <option selected="true" value="ny">New York</option>     
      <option value="van">Vancouver</option>     
      <option value="par">Paris</option> 
    </select>
    <button type="action" name="send-answers">Submit</button> 
  </form>
</messageML>

<!-- PresentationML -->
<div data-format="PresentationML" data-version="2.0"> 
  <form id="example"> 
    <div class="dropdown-group">
      <label for="dropdown-{uniqueLabelId}">Cities</label>
        <select id="dropdown-{uniqueLabelId}" name="cities"> 
        <option selected="true" value="ny">New York</option> 
        <option value="van">Vancouver</option> 
        <option value="par">Paris</option> 
      </select> 
    </div>
    <button type="action" name="send-answers">Submit</button> 
  </form> 
</div>

Person selector

<!-- MessageML -->
<messageML>
  <form id="example">
    <person-selector label="Awesome users" name="awesome-users"/>
    <button type="action" name="send-answers">Submit</button> 
  </form>
</messageML> 

<!-- PresentationML -->
<div data-format="PresentationML" data-version="2.0"> 
  <form id="example"> 
    <div class="person-selector-group">
      <label for="person-selector-{uniqueLabelId}">Awesome users</label>
      <div class="person-selector" id="person-selector-{uniqueLabelId}" data-name="awesome-users"></div>
    </div>    
    <button type="action" name="send-answers">Submit</button> 
  </form> 
</div>