HTML - 4

19 Jan 2021

* HTML Form Element

* 위 기능의 태그
- inline 요소이다 -> 기본적인 가로배치
* label -> input요소와 아이디글자를 연결해준다
* radio -> 복수선택이 안된다
* checkbox ->  복수선택 됨

<form action="" class="list">
  <label for="login-id">아이디</label>
  <input type="text" id="login-id"/>
  <label for="login-pwd">비밀번호</label>
  <input type="password" id="login-pwd" />
  <input type="submit" />
  <input type="reset"/>
  <input type="radio" id="radio-button"/>
  <label for="radio-button">라디오버튼 목록</label>
  <input type="checkbox" id="check-button"/>  
  <label for="check-button">체크박스 목록</label>
  <input type="button" value="동작버튼"/>
  <input type="date"/>
  <input type="file"/>
</form>

* 위 기능의 태그
*  option 의 value -> 서버에 전달되는 내용
<form>
  <label for="select">프론트엔드 언어 목록</label>
  <select id="select">
    <option value="HTML">HTML</option>
    <option value="CSS">CSS</option>
    <option value="JavaScript">JavaScript</option>
  </select>
</form>

* 위 기능의 태그
* button type="button" 의 장점
 : 시작태그/종료태그구성
   -> css 컨트롤 수월
   -> 가상요소(Pseudo Element) 사용가능
   -> 콘텐츠/HTML 요소를 사용할 수 있다
   -> type : button, reset, submit 사용가능하다
* input type="button" :  제약이 많다

<form>
  <textarea></textarea>
  <button type="button">버튼<br/>동작</button>
  <input type="button"value="버튼"/>

</form>

* 위 기능의 태그
* id가 중복되지않도록 유의한다
* 동일한 name 속성을 사용하면 같은 그룹으로 묶인다 -> radio 와 name 은 같이 사용된다

<form>
  <input type="radio" id="HTML" name="frontend"/>
  <label for="HTML">HTML</label>
  <input type="radio" id="CSS" name="frontend"/>
  <label for="CSS">CSS</label>
  <input type="radio" id="JavaScript" name="frontend"/>
  <label for="JavaScript">JavaScript</label>
</form>