[Html] Form - Input / Label / Radio & Checkbox / Select / Textarea / Button

From

<form action="API 주소" method="GET | POST"></form>

 

---

 

Input

<input type=""/>

input에는 무조건 type이라는 속성 값이 들어가야 함

 

<input type="text" placeholder="아이디를 입력하세요" minlength="5" maxlength="12" required/>

placeholder : hintText

minlength : 입력해야하는 단어의 최소 값

maxlength : 입력해야하는 단어의 최대 값

required : 필수로 입력해야 하는 input

disable : 특정 input 값을 사용하지 못하게 함

value="치즈 도넛" : 기본으로 들어가는 값 (복사도 가능!)

 

<input="number" min="12" max="125"/>

** number의 최솟값과 최댓값을 적고 싶으면 min과 max를 사용해야 함

 

<label for="phone">Enter your phone number:</label>

<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>

 

<input type="file" accept=".png, .jpg"/>

** 확장자명을 정하고 싶다면 accept를 사용

 

---

Label

 : 폼 양식에 이름을 붙이는 태그

<label for="">라벨</label>

** for은 '누구'를 위한 라벨인지 명시해줘야 함 -> for="input id"

<label for="user-name">이름</label>
<input type="text" id="user-name"/>

** for에 아이디 값을 넣을 때 #을 사용하지 않음

 

---

Radio & Checkbox

<input type="radio" name="fruit" id="banana" value="banana"/>
<label for="banana">banana</label>

<input type="radio" name="fruit" id="apple" value="apple"/>
<label for="apple">apple</label>

 

** 하나의 그룹으로 만들어 주기 위해 name=" "라는 속성이 무조건 필요함

** 선택하여 서버에 전송할 때 value=" " 값이 필요함 (name = value)

---

Select

<label for="skill">skill</label>
  <select name="skill" id="skill">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="js">JavaScript</option>
  </select>

---

Textarea

ex. 자기소개, 많이 적어야 하는 글

<textarea id="field" placeholder="자기소개를 입력하세요!"></textarea>

---

Button

무조건 type이라는 속성 값이 들어가야 함

type : button / submit / reset

<button type="button">버튼</button>

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

<button type="reset">초기화</button>