본문 바로가기
WEB CODING/HTML

HTML <form> 태그

by uioweb 2020. 7. 4.

form 태그란?

웹페이지에서 회원가입, 로그인과 같은 정보를 입력하는 곳에 쓰이는 HTML 태그이다.

<form> 태그의 형식은?

<form> 태그 뿐만 아니라, 입력태그들은 거의다 Inline 형식의 태그들이다.

form 태그의 사용방법

<form></form> 태그 사이에 <input> 태그가 들어갑니다.

<input> 태그에는 여러가지 속성들이 있습니다.

속성들이 너무 많으므로 모두 외우는 것은 매우 힘든 일입니다. 그래서 몇가지 자주 쓰이는 것들만 골라보았습니다.

 

<input type="text"> : 텍스트를 입력할때 쓰이는 속성입니다.

<input type="password"> : 비밀번호를 입력할때 쓰이는 속성입니다.

<input type="radio"> : 동그라미 라디오 버튼을 만들어주는 속성입니다.

<input type="checkbox"> : 여러가지 체크를 해야하는 상황에 들어가는 속성입니다.

<input type="submit"> : 입력한 정보를 제출할때 쓰이는 버튼을 만들어 주는 태그입니다.

<input type="reset"> : 입력한 정보를 초기화할때 쓰이는 버튼을 만들어 주는 태그입니다.

 

<input type="submit">과 <input type="reset">은 <button></button> 태그로 사용이 가능합니다.

<button type="submit"></button>

 

마지막으로 자주 쓰이는 태그중에는 항목을 선택할 수 있는 태그도 있습니다.

<select></select> 태그 사이에 <option></option> 태그를 넣어서 선택태그를 만들어 줄 수도 있습니다.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML <form> Tag</title>
  </head>
  <body>
    <form action="">
      <label for="">text</label> <input type="text">
      <br><br>
      <label for="">password</label> <input type="password">
      <br><br>
      <label for="">radio</label> <input type="radio">
      <br><br>
      <label for="">checkbox</label> <input type="checkbox">
      <br><br>
      <label for="">submit</label> <input type="submit">
      <br><br>
      <label for="">reset</label> <input type="reset">
      <br><br>
      <button type="submit">버튼태그</button>
      <br><br>
      <select name="" id="">
        <option value="리스트 1">리스트 1</option>
        <option value="리스트 2">리스트 2</option>
        <option value="리스트 3">리스트 3</option>
      </select>
    </form>
  </body>
</html>

결과 화면

 

'WEB CODING > HTML' 카테고리의 다른 글

HTML <form> 태그  (2) 2020.07.04
HTML 부모 태그와 자식 태그  (2) 2020.06.21
HTML block 형식의 태그와 inline 형식의 태그  (0) 2020.06.20
HTML <img> 태그  (0) 2020.06.20
HTML <table> 태그  (0) 2020.06.15
HTML <ul>, <ol>, <li> 태그  (7) 2020.06.11

댓글2