frontend/HTML
[필기] HTML 기초 (2)
Mr.코딩
2023. 7. 25. 23:23
코딩을 위한 필수 사이트들
- 깃허브
- MDN Semantics
- pixabay : 이미지 사이트
- videvo : 소리 파일 사이트
- flexbox froggy : 플렉스박스 연습하기
input 태그
문법 : <input type=" " id="name">
타입에는 email, tel, address 등이 있는데 일종의 데이터 유효성 검사를 통해 특정 양식만 입력할 수 있게 되어 있음.
더 많은 type은 MDN 사이트에서 확인 가능
id는 필수는 아니지만 "id 값을 입력하는 것은 웹 개발에서 요소를 식별하고 조작하는 용이성과 웹 접근성 향상, CSS 스타일링 등 다양한 장점을 가져다줍니다. 따라서 가능하다면, 고유하고 의미 있는 id 값을 인풋 태그와 다른 요소에 할당하는 것이 좋"다고 한다. (출처: chatGPT)
label 태그
input 태그, select 태그, textarea 태그, button 태그 등과 함께 쓸 수 있는 태그로 해당 입력 태그가 어떤 것인지 '설명'하는 태그이다. 작성방법은 두 가지가 있다.
<label>
이름:
<input type=" ", id="name">
</label>
... 이런 식으로 레이블 안에 다른 태그를 담는 방식과
<label for="name">이름:</label>
<input type=" " id="name">
이런 식으로 각각 쓴느 방법.
그외
- url 태그
- number 태그 (최소 유효성 조건을 걸 수 있다. 링크)
- range 태그 (이것도 최대/최소를 걸 수 있다.)
- date 태그 (달력 형태로 날짜 선택)
- month
- week
Form 데이터 태그 속성
- 반드시 입력하도록 할 수 있다. required
- 읽기 전용으로 만들 수 있다. readonly
- 비활성화할 수 있다. disabled
- 초기에 해당 필드에 커서를 위치시켜서 눈에 띄게 할 수 있다. autofocus
- 빈 필드에 설명이나 문구를 삽입할 수 있다. placeholer
그밖에 여러 폼 태그들 (짐코딩)