[그린컴퓨터] 클라이언트/HTML

HTML 핵심 요소 { input, label, button, textarea, select, form }

Ben의 프로그램 2023. 6. 22. 13:44
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 속성을 포함하고 있다.