HTML 튜토리얼

HTML 홈 HTML 소개 HTML 편집기 HTML 기본 HTML 요소 HTML 속성 HTML 제목 HTML 단락 HTML 스타일 HTML 서식 HTML 인용문 HTML 주석 HTML 색상 HTML CSS HTML 링크 HTML 이미지 HTML 파비콘 HTML 테이블 HTML 목록 HTML 블록 및 인라인 HTML 클래스 HTML ID HTML 아이프레임 HTML 자바스크립트 HTML 파일 경로 HTML 헤드 HTML 레이아웃 반응형 HTML HTML 컴퓨터 코드 HTML 의미론 HTML 스타일 가이드 HTML 엔티티 HTML 기호 HTML 이모티콘 HTML 문자 집합 HTML URL 인코딩 HTML 대 XHTML

HTML 양식

HTML 양식 HTML 양식 속성 HTML 양식 요소 HTML 입력 유형 HTML 입력 속성 HTML 입력 양식 속성

HTML 그래픽

HTML 캔버스 HTML SVG

HTML 미디어

HTML 미디어 HTML 비디오 HTML 오디오 HTML 플러그인 HTML 유튜브

HTML API

HTML 지리적 위치 HTML 드래그/드롭 HTML 웹 스토리지 HTML 웹 작업자 HTML SSE

HTML 예제

HTML 예제 HTML 퀴즈 HTML 연습 HTML 인증서 HTML 요약 HTML 접근성

HTML 참조

HTML 태그 목록 HTML 속성 HTML 전역 속성 HTML 브라우저 지원 HTML 이벤트 HTML 색상 HTML 캔버스 HTML 오디오/비디오 HTML 문서 유형 HTML 문자 집합 HTML URL 인코딩 HTML 언어 코드 HTTP 메시지 HTTP 메소드 PX에서 EM으로의 변환기 키보드 단축키

HTML 입력 양식* 속성


이 장에서는 form*HTML <input>요소의 다양한 속성에 대해 설명합니다.


양식 속성

입력 form속성은 <input>요소가 속한 형식을 지정합니다.

이 속성의 값은 그것이 속한 <form> 요소의 id 속성과 같아야 합니다.

예시

HTML 양식 외부에 있는 입력 필드(그러나 여전히 양식의 일부임):

<form action="/action_page.php" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

formaction 속성

입력 formaction속성은 양식이 제출될 때 입력을 처리할 파일의 URL을 지정합니다.

참고: 이 속성 action<form>요소의 속성을 재정의합니다.

속성 은 formaction제출 및 이미지 입력 ​​유형과 함께 작동합니다.

예시

다른 작업과 함께 두 개의 제출 버튼이 있는 HTML 양식:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>

formenctype 속성

입력 formenctype 속성은 제출할 때 양식 데이터를 인코딩하는 방법을 지정합니다(method="post"가 있는 양식에만 해당).

참고: 이 속성은 <form>요소의 enctype 속성을 재정의합니다.

속성 은 formenctype제출 및 이미지 입력 ​​유형과 함께 작동합니다.

예시

두 개의 제출 버튼이 있는 양식입니다. 첫 번째는 기본 인코딩으로 양식 데이터를 보내고 두 번째는 "multipart/form-data"로 인코딩된 양식 데이터를 보냅니다.

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

formmethod 속성

input formmethod 속성은 form-data를 action URL로 보내기 위한 HTTP 메소드를 정의합니다.

참고: 이 속성은 <form>요소의 메서드 속성을 재정의합니다.

속성 은 formmethod제출 및 이미지 입력 ​​유형과 함께 작동합니다.

양식 데이터는 URL 변수(method="get") 또는 HTTP 포스트 트랜잭션(method="post")으로 보낼 수 있습니다.

"get" 메서드에 대한 참고 사항:

  • 이 메서드는 이름/값 쌍의 URL에 양식 데이터를 추가합니다.
  • 이 방법은 사용자가 결과를 책갈피로 지정하려는 양식 제출에 유용합니다.
  • URL에 넣을 수 있는 데이터의 양에는 제한이 있으므로(브라우저마다 다름) 모든 양식 데이터가 올바르게 전송되는지 확신할 수 없습니다.
  • 민감한 정보를 전달하기 위해 "get" 메소드를 사용하지 마십시오! (비밀번호 또는 기타 민감한 정보는 브라우저의 주소 표시줄에 표시됩니다)

"post" 방법에 대한 참고 사항:

  • 이 메소드는 양식 데이터를 HTTP 포스트 트랜잭션으로 보냅니다.
  • "게시" 방법을 사용하는 양식 제출은 북마크할 수 없습니다.
  • "post" 방법은 "get"보다 더 강력하고 안전하며 "post"에는 크기 제한이 없습니다.

예시

두 개의 제출 버튼이 있는 양식입니다. 첫 번째는 method="get"으로 form-data를 보냅니다. 두 번째는 method="post"로 form-data를 보냅니다.

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

formtarget 속성

입력 formtarget속성은 양식을 제출한 후 받은 응답을 표시할 위치를 나타내는 이름 또는 키워드를 지정합니다.

참고: 이 속성은 <form>요소의 대상 속성을 재정의합니다.

속성 은 formtarget제출 및 이미지 입력 ​​유형과 함께 작동합니다.

예시

서로 다른 대상 창이 있는 두 개의 제출 버튼이 있는 양식:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

formnovalidate 속성

입력 formnovalidate속성은 제출할 때 <input> 요소의 유효성을 검사하지 않도록 지정합니다.

참고: 이 속성은 <form> 요소의 novalidate 속성을 재정의합니다.

속성 은 formnovalidate제출 유형과 함께 작동합니다.

예시

두 개의 제출 버튼이 있는 양식(유효성 확인 포함 및 제외):

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate"
  value="Submit without validation">
</form>

무효화 속성

novalidate속성은 속성 <form>입니다.

존재하는 경우 novalidate는 제출 시 모든 양식 데이터의 유효성을 검사하지 않아야 함을 지정합니다.

예시

제출 시 양식 데이터의 유효성을 검사하지 않도록 지정합니다.

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

HTML 양식 및 입력 요소

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control

사용 가능한 모든 HTML 태그의 전체 목록을 보려면 HTML 태그 참조 를 방문하십시오 .