(HTML) form 태그

form 태그

서버 또는 지정된 페이지로 입력된 값을 제출하는 형태를 나타내는 태그

- block 형식

속성

• action : 내부 input에 작성된 값을 제출할 경로 또는 주소를 작성
• method(방식) : 서버 또는 페이지로 데이터를 제출하는 방식을 지정
  (GET, POST, PUT, DELETE)
• name : form 태그의 이름을 지정(Javascript에서 사용)
• target : action 주소로 제출 시
  결과가 현재/새 탭에 열리도록 지정
  

아이디 :

이름 :

제출하기

<!-- result.html로 get방식 제출, 결과는 새탭에서 확인 -->

<form action="result.html" method="get" target="_blank">

아이디 : <input type="text" name="inputId" /> <br />
이름 : <input type="text" name="inputName" /> <br />
<button type="submit">제출하기</button>

</form>

<!-- action 미작성 시 현재 페이지로 제출 -->

• fieldset 태그 : form 태그 내부에 구역을 구분하는 용도의 태그
• legend 태그 : fieldset에 제목을 붙이는 태그

• required 속성 : input 태그를 필수로 입력하게 만드는 속성

예시

필수 입력 정보

이름 :

팀 선택 :
A팀

/
B팀

추가 개인 정보

이메일 :

나이 :

주소 :

제출 초기화

예시코드

<form>
      <fieldset>
        <legend>필수 입력 정보</legend>

        이름 : <input type="text" name="inputName" required /> <br />

        팀 선택 :
        <label for="A">A팀</label>
        <input type="radio" name="team" id="A" value="A" required />
        /
        <label for="B">B팀</label>
        <input type="radio" name="team" id="B" value="B" required />
      </fieldset>
      <br />

      <fieldset>
        <legend>추가 개인 정보</legend>

        이메일 : <input type="email" name="inputEmail" /> <br />
        나이 : <input type="number" min="0" max="150" /> <br />
        주소 : <input type="text" size="30" />
      </fieldset>

      <br />
      <button>제출</button>
      <button type="reset">초기화</button>
    </form>