frontend/HTML

[필기] HTML 기초 (2)

Mr.코딩 2023. 7. 25. 23:23

코딩을 위한 필수 사이트들

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

그밖에 여러 폼 태그들 (짐코딩)