JSFiddle - React, Tailwind, and code Playground

by peterdrinnan

HTML

<h3>1st form with field labels</h3>
<p>When you click on a field, the focus goes to the first field above with a label.
</p>

<div ng-app="fieldlabeldemo">
    <div ng-controller="Ctrl">
        
        <form>
            
            <label>Label 1<label>
            <input type="text"></input>
            <br />
            <br />
                
            <label>Label 2
             <input type="text"></input><label>
           
            <br />
            <br />
                
            Notice even the fields without labels are affected by the fields above.  <br />              
           <input type="text"></input>
            <br />
            <br />
                            
                           
            <input type="text"></input>
            <br />
            <br />
                                        
        </form>            
    </div> 
                
                
                <hr />
                <h3>2nd form uses strong tags instead of labels</h3>
               <p>In this case everything behaves normally.
</p>
                
    <div ng-controller="Ctrl2">
        
        <form>
            
                
            <strong>Label 1<strong>
             <br />
             <input type="text"></input>
           
            <br />
            <br />
                
            <strong>Label 2<strong>
            <br />
            <input type="text"></input>
            <br />
            <br />
                            
           <strong>Label 3<strong>
            <br />                
            <input type="text"></input>
            <br />
           
                                        
        </form>            
    </div>    
</div>

JavaScript

var app = angular.module('fieldlabeldemo', []);

function Ctrl($scope) {

}


function2 Ctrl($scope) {
   
}