HTML5 - input 요소와 form 요소 속성 (2)

height and width

height 와 width 속성은 이미지나 <canvas> 요소의 크기를 지정합니다. 즉 <input> 태그의 속성이 image일  경우에는 height와 width 속성을 사용하여 이미지의 높이와 너비를 명시할 수 있습니다.

<input type = "imgae" src = "이미지 경로" alt = "전송" height = 20 width = 20>

---

list

list 속성은 해당 input 요소에 대한 미리 정의된 옵션 리스트를 설정하는 datalist 요소와 관련이 있습니다. input 요소의 list 속성값이 datalist 요소의 id 속성값과 일치하면 연결이됩니다.

<input type="text" list="fruits">
<datalist id="fruits">
  <option value="사과">
  <option value="바나나">
  <option value="오렌지">
</datalist>

---

min and max

min 과 max는 숫자 입력 요소의 최솟값과 최댓값을 지정합니다. input의 type 중 number, range, date 등과 함께 사용 합니다.

<input type="number" min="0" max="100">

 <input type="date" name="date" min="2000-01-01" max="2023-12-31"><br><br>

---

multiple

multiple 속성은 여러 개의 파일을 한 번에 선택할 수 있는지 여부를 지정합니다. 즉 input 요소에 2개 이상 입력하는 것을 허용한다는 뜻입니다. multiple은 주로 input type 중 email 과 file 타입에서 사용합니다.

 

<input type="file" name ="selectedfile" multiple>

---

pattern

pattern 속성은 입력된 값을 검사하기 위한 정규 표현식(reqular expression)을 명시합니다. 

 

 <input type="email" name="email"
        pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.]*[a-zA-Z]*" 
        title="이메일 양식">

 

a-zA-Z0-9] : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나올 수 있다. [@] : '@' 문자만 나올 수 있다. [.] : '.' 문자만 나올 수 있다. [.]* : '.' 문자가 나와도 되고 나오지 않아도 상관없다.. [a-zA-Z0-9]* : 영문 소문자나 영문 대문자, 숫자 중 어느 것이라도 개수에 상관없이 나와도 되고 나오지 않아도 상관 없다.

---

placeholder

placeholder 속성은 입력 필드에 사용자가 입력해야 할 값을 표시합니다. 해당 속성은 입력 필드에 포커스가 오게되면 더 이상 표시하지 않습니다.

 

 사용자 : <input type="text" name="username" placeholder="뽀미"><br>
 비밀번호 : <input type="password" name="password" placeholder="9999"><br><br>

 

사용자 :
비밀번호 :

 

---

 

required

required 속성은 필드가 비어 있을 수 없음을 나타냅니다. 이 속성이 설정된 모든 input 요소는 입력값이 존재해야만 서버로 전송할 수 있습니다.

 

이름 : <input type="text" name="name" required><br>
나이 : <input type="number" name="age" min="1" max="99"><br><br>

 

---

step

step 속성은 input 요소에 입력할 수 있도록 허용된 숫자 간격을 명시합니다. 주로 input type 중 number 와 많이 사용합니다.  아래 예시와 같은 코드는 사용자가 입력할 수 있는 값이 0.5씩 증가 또는 감소하는 숫자 값을 받을 수 있는 입력 필드를 생성합니다.

<input type="number" step="0.5">