728x90

- input 태그는 사용자에게 데이터를 입력 받을 때 사용한다.
- type 속성으로 입력 받을 데이터의 형태를 지정한다. (text, password, checkbos, radio)
- value 속성을 사용하면 입력 받을 값을 미리 지정해 놓을 수 있다.
- disabled 속성을 추가하면 비활성화 시킬 수 있다.




- 날짜 입력은 예를 들어 예약 정보를 받을 때 많이 사용합니다.
- 데이터 형태 중에 가장 까다로운 것이 날짜 타입인데, 왜냐하면 지정된 포멧이 있기 때문에 포멧을 꼭 지켜서 데이터를 입력받아야 하기 때문이다. 그래서 날짜 타입을 사용자로부터 입력받을 때는 꼭 포멧을 지켜야 한다.

- label 태그는 입력 필드에 이름표를 붙이는 역할을 수행한다.
- 입력 필드 (input 태그)의 id 를 지정한 다음 label 태그의 for 속성으로 지정하면 입력 필드와 연결된다.






- checkbox 는 중복 체크가 가능하지만, radio 버튼은 name 으로 묶은 대상들 중에서 그룹당 하나만 선택이 가능하다.







- 버튼을 만들 때는 button 태그를 사용해도 되고 input 태그의 button type 을 사용해도 된다.
- textarea 태그는 여러 줄의 텍스트를 입력할 때 사용한다.
- select 태그는 option 태그를 자식으로 가지며 값 목록에서 사용자의 선택을 받을 때 사용한다.

- form 태그는 사용자가 입력한 데이터를 서버에 전달할 때 사용한다.
- form 태그의 action 속성에는 서버의 주소를 입력하고, method 속성에는 전달방식을 입력한다.
- 그런데, 서버에는 순수한 값만 전달이 되기 때문에 서버는 값들이 무엇을 의미하는지 모른다.
그렇기 때문에 각각 입력받는 input 태그에 name 속성을 붙여주어 데이터에 이름을 지정해 주어야 한다. - 데이터 전송 및 취소를 위한 input 태그의 type 속성의 속성 값으로 submit 과 reset 속성값을 지정해줄 수 있다.



- 라벨의 크기가 달라서 보기가 좋지 않다.
- 라벨을 inline-block 으로 크기를 지정해주는 것이 일반적이다.

- ul 필드를 활용해서 입력 필드를 구성한 이유는 항목들이 한 줄에 표시되는 것을 막기 위해서이다.
label 과 input 태그는 inline 요소이기 때문에 가시성을 위해서 ul 필드를 활용해서 처리해준 것이다.
block 요소로 만들어서 정렬해줄 수도 있지만 inline 인 상태 그대로 둔 다음 ul 로 처리해준 것이다. - 또한 눈여겨 봐야 할 부분은 배송 정보의 label 부분인데, float 은 글자 정렬과 display: inline-block 속성을 포함하고 있다.







'[그린컴퓨터] 클라이언트 > HTML' 카테고리의 다른 글
| HTML 핵심 요소 { table 태그 } (0) | 2023.06.26 |
|---|---|
| HTML 핵심 요소 { div, h1, p, img, ul, a, span, br } (0) | 2023.06.21 |
| 전역 속성 { title, style, class, id } (0) | 2023.06.21 |
| 인라인과 블록 (0) | 2023.06.20 |
| 속성과 값 & 주석 (0) | 2023.06.20 |