HTML Input Form

<form action="/home/admin" class="className" method="post">
  <!-- text -->
  <label for="userName">User Name</label>
  <input type="text" name="userName" id="textId" class="textClass">
  <br/><hr>
      
  <!-- radio button -->
  <label for="seneca">Seneca</label>
  <input type="radio" name="college" value="seneca">
  <label for="humber">Humber</label>
  <input type="radio" name="college" value="humber">
  <label for="sheriden">Sheriden</label>
  <input type="radio" name="college" value="sheriden">
  <br><hr>
  
  <!-- check box -->
  <label for="seneca">Seneca</label>
  <input type="checkbox" name="college" value="seneca">
  <label for="humber">Humber</label>
  <input type="checkbox" name="college" value="humber">
  <br><hr>
  
  <!-- select -->
  <label for="college">Select a school</label>
  <select name="college">
    <option value="select">select</option>
    <option value="seneca">Seneca</option>
    <option value="humber">Humber</option>
    <option value="sheriden">Sheriden</option>
  </select>
  <br><hr>
  
  <!-- select group -->
  <label for="school">Select a school</label>
  <select name="school">
    <optgroup label="College">
      <option value="seneca">Seneca</option>
      <option value="humber">Humber</option>
    </optgroup>
    <optgroup label="university">
      <option value="toronto">Toronto</option>
      <option value="york">York</option>
    </optgroup>
  </select>
  <br><hr>
  
  <!-- textarea -->
  <label for="college">College</label><br>
  <textarea name="college" rows="3" cols="30">any text can write here ...</textarea>
  <br><hr>
  
  <!-- submit -->
  <input type="submit" value="Submit">
  <submit class="className" style="background-color:red; cursor:pointer;">SEND</submit>
  <input type="reset" value="Reset">
</form>

input type="button  Vs.  button

<!-- input type=”button” : 값을 받거나 전달할때 사용 -->
<input type=”button” value=”Login” onclick=”location.href=’admin/login’”> // 다른페이지로 이동
<input type=”button” value=”Login” onclick=”window.open(‘admin/login’)”> // 새로운 탭 열기

<!-- button: 값을 전달하는 사용자 인터페이스를 구현 -->
<button type=”button” value=”Login” onclick=”location.href=’admin/login’”>클릭</button> // 다른페이지로 이동
<button type=”button” value=”Login” onclick=”window.open(‘admin/login’)”>클릭</button> // 새로운 탭 열기

- button은 이미지 요소나 기타 필요한 것들을 자식으로 가질 수 있다

- button type=”button”을 하지 않으면 “submit” 기능을 수행한다

- button type=”submit”은 form 전송 기능을 수행한다

- button type=”reset”은 내용을 초기화 한다

- button type=”button”은 URI는 연결하지 않고 단순하게 인터페이스를 조작(기능선택, 레이어보기, 삭제등)하기 위한 버튼으로 자바스크립트 실행