HTML5 - Input 요소와 form 요소 속성(1)

HTML5 form 요소의 속성

• autocomplete
• novalidate

---

input 요소의 속성

기존 input 요소

• value
• readonly
• disabled
• maxlength
• size

---

HTML5 추가된 input 요소의 속성

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formatarget
• height and width
• list
• min and max
• multiple
• pattern
• placeholder
• required
• step

---

autocomplete

autocomplete 속성은 <input> 요소에 대한 자동 완성 기능을 설정합니다. 이 속성은 사용자가 이전에 입력한 값을 기반으로 자동 완성 기능을 제공하며, 브라우저가 이전에 입력한 데이터를 기억하고 제안 목록을 표시합니다. autocomplete 속성은 다음과 같은 값을 가질 수 있습니다

• "on": 브라우저는 자동 완성 기능을 사용합니다. (기본값)
• "off": 브라우저는 자동 완성 기능을 사용하지 않습니다.

예를 들어, <input> 요소에 autocomplete="off"을 설정하면 브라우저가 자동 완성을 제공하지 않습니다.

<form>
     아이디 : <input type = "text" name = "username" autocomplete = "on"><br>
     비밀번호 : <input type = "password" name = "password" min = "4" max = "13"><br><br>
     <input type = "submit" value = "전송">
   </form>

 

아이디 :
비밀번호 :

---

autofocus

autofocus 속성은 페이지가 로드될 때 자동으로 해당 <input> 요소에 초점을 설정합니다. 페이지에 여러 개의 <input> 요소가 있을 때, autofocus 속성을 가진 요소가 자동으로 초점을 받습니다. autofocus 속성은 다음과 같은 값을 가질 수 있습니다.

• "autofocus": 해당 요소에 초점을 설정합니다. (기본값)

예를 들어, <input> 요소에 autofocus를 설정하면 페이지가 로드될 때 해당 요소에 자동으로 초점이 맞춰집니다.

  <form>
    아이디 : <input type = "text" name = "username" autofocus><br>
    비밀번호 : <input type = "password" name = "password"><br><br>
    <input type = "submit" valuse ="전송">
  </form>

 

아이디 :
비밀번호 :

---

form

form 요소는 사용자 입력을 서버로 제출하기 위한 입력 요소들의 그룹을 정의합니다. form 요소에는 사용자 입력을 처리할 서버 스크립트의 URL을 지정하는 action 속성이 포함되어야 합니다. 예를 들어, <form action="/submit" method="post">와 같이 사용할 수 있습니다. form 요소 내에는 <input>, <textarea>, <select> 등의 입력 요소들이 포함될 수 있습니다.

 

 <form id = "testform">
     아이디 : <input type ="text" name = "username"><br>
      <input type = "submit" value = "전송">
   </form>
   <p>
   ------------------------------------------------
   </p>
   비밀번호 : <input type = "passwoer" naem = "password" form ="testform">

위 코드에서 비밀번호는 form안에 들어가 있지 않지만 input 의 form 속성을 이용하면 form안에 쓰여있지 않아도 form에 속한것으로 취급한다.

 

아이디 :

------------------------------------------------

비밀번호 :

---

formaction

formaction 속성은 <button> 또는 <input type="submit">, <input type="image">와 함께 사용되며, 폼이 제출될 때 사용할 서버 스크립트의 URL을 지정합니다. formaction 속성은 action 속성보다 우선합니다. 이를 통해 각 버튼이나 입력 요소마다 다른 서버 스크립트를 호출할 수 있습니다.

※ action 속성은 form 요소의 속성을 말합니다. form의 에서 입력받은 값이 전달될 서버 측 파일을 명시하는 속성입니다.

   <form action="서버">
    아이디 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password"><br><br>
    <input type="submit" value="전송" formaction="서버2"><br>
</form>

 

아이디 :
비밀번호 :

 

위에서 전송 버튼을 누르게 되면 기존의 form에서는 action 속성에 명시되어있는 '서버' 로 값이 전달되겠지만 위 코드는 input에서 formaction 속성으로 '서버2'를 설정 했기 때문에 '서버'가 아닌 '서버2'로 입력받은 값이 전달된다.

---

formenctype

formenctype 속성은 폼 데이터를 서버로 전송할 때 사용할 인코딩(암호화) 방식을 지정합니다. 주로 파일 업로드와 관련이 있습니다. formenctype 속성은 다음과 같은 값을 가질 수 있습니다.

• "application/x-www-form-urlencoded": 폼 데이터를 URL 인코딩하여 전송합니다. (기본값)
• "multipart/form-data": 폼 데이터를 바이너리 형식으로 인코딩하여 전송합니다.
• "text/plain": 폼 데이터를 일반 텍스트로 전송합니다.

<form method = "post">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password"><br><br>
    <input type="submit" value="전송" formenctype = "multipart/form-data"><br>
</form>

 

사용자 :
비밀번호 :

※ formenctype 은 form의 method가 post일 때만 적용됩니다. 그리고 input type이 submit 과 image일 때만 사용할 수 있습니다.

---

formmethod

formmethod 속성은 폼 데이터를 서버로 전송할 때 사용할 HTTP 메서드를 지정합니다. formmethod 속성은 다음과 같은 값을 가질 수 있습니다.

• "get": 폼 데이터를 URL 매개변수로 전송합니다. (기본값)
• "post": 폼 데이터를 HTTP 요청 본문에 포함하여 전송합니다.
  
  

<form method = "post">
    사용자 : <input type="text" name="username"><br>
    비밀번호 : <input type="password" name="password"><br><br>
    <input type="submit" value="전송" formmethod ="get"><br>
</form>

 

사용자 :
비밀번호 :

위 전송 버튼을 누르면 post 방식이 아닌 get 방식으로 데이터를 전송합니다. 즉, form 의 method를 formethod 속성이 덮어쓰기 합니다.

 

※ formmethod는 input type이 submit 과 image일 때만 사용할 수 있습니다.

---

formnovalidate

formnovalidate 속성은 폼이 제출될 때 브라우저에 의한 유효성 검사를 비활성화 여부를 지정합니다. 이 속성은 form의 novalidate 속성을 덮어쓰기 합니다. 또한 input type이 submit일 때만 사용가능합니다.

 

<form action="/action_page.php">
  <label for="email">이메일을 입력하세요:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="유효성 검사 후 제출">
  <input type="submit" formnovalidate="formnovalidate" value="유효성 검사 없이 제출">
</form>

 

이메일을 입력하세요:

 

위 예시에서 첫 번째 submit 버튼은 기본적인 유효성 검사를 수행하고 , 두 번째 submit 버튼은 formnovalidate 속성을 사용했기 때문에 유효성 검사 없이 제출합니다

---

formtarget

formtarget 속성은 폼이 제출된 후 응답이 표시될 위치를 지정합니다. form의 target 속성을 덮어쓰기 하고, input type이 submit 과 image 타입에서만 사용합니다.

<form action="/action_page.php">
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">성:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="일반적으로 제출">
  <input type="submit" formtarget="_blank" value="새 창에서 제출">
</form>

 

성:

 

위 예시에서는  첫 번째 submit 버튼은 일반적으로 제출이 진행되고, 두 번째 버튼은 formtarget 속성을 사용해서 새 창에서 제출됩니다.