LIGHTIXXX

<button> - 선택 가능한 버튼을 만들 때 사용하는 태그

<!-- 자바스크립트를 이용한 기능 구현에 주로 사용 -->
<button type="button"> 버튼 </button>

<!-- 폼의 전송 전송 기능 -->
<button type="submit"> 확인 </button>

<!-- 폼 작성 내용 초기화 기능 -->
<button type="reset"> 다시 쓰기 </button>

<button type="button"> vs <a href="#"> vs <input type="button">

1. <input type="button"> 보다 디자인에 있어서 매우 자유롭고, 태그 안에 다른 태그 삽입도 가능!

일반적인 디자인들을 모두 적용할 수 있어서, 배경에 이미지로 넣을 수 있다.

 2. <a> 태그는 문서간의 연결이 주된 목적이기 때문에 링크에만 사용하고, 기능 구현은 button으로 하는 것이 시멘틱한 마크업!

<form action=" " method="GET"> 
  
  <input type="radio" name="user-sex" id="male" />
  <label for="male"> 남자 </label>
  
  <input type="radio" name="user-sex" id="male" />
  <label for="female"> 여자 </label>
  
  <button type="submit"> submit </button>
  
</form>

🚨 Syntax alert 🚨 

필수 attribute

name="user-sex" : 같은 값을 적어서 radio 그룹을 묶어준다

value="male" : 다른 값을 적어서 제출 시 서버에서 구분하기 위해 작성해야 한다

<input type="checkbox" /> - 여러가지 항목을 선택할 수 있는 버튼

<h1> 취미 </h1>

<form action=" " method="POST">

  <input type="checkbox" name="hobby" value="design" id="design" />
  <label for="design"> 디자인 </label>
  
  <input type="checkbox" name="hobby" value="photograph" id="photograph" />
  <label for="photograph"> 사진촬영 </label>
  
  <input type="checkbox" name="hobby" value="video-editing" id="video-editing" />
  <label for="video-editing"> 영상편집 </label>
  
  <button type="submit"> submit </button>
  
</form>

🚨 Syntax alert 🚨 

필수 attribute

name="hobby" : 같은 값을 적어서 checkbox 그룹을 묶어준다

value="design" : 다른 값을 적어서 제출 시 서버에서 구분하기 위해 작성해야 한다

<input /> - 사용자에게 정보나 데이터를 받아올 입력창

🚨 Syntax alert🚨 

기본 attribute로 type을 작성해야 한다

<form action=" " method=" ">

  <!-- 한 줄 정도의 간단한 텍스트를 입력하는 경우 -->
  <input type="text" />
  
  <!-- 숫자를 입력하는 경우 -->
  <input type="number" /> 
  
  <!-- 비밀번호를 입력하는 경우 -->
  <input type="password" /> 
  
  <!-- 이메일을 입력하는 경우 -->
  <input type="email" />
  
  <!-- 전화번호를 입력하는 경우 -->
  <input type="tel" /> 
  
  <!-- 라디오 버튼을 만드는 경우 -->
  <input type="radio" /> 
  
  <!-- 기본 버튼을 만드는 경우 -->
  <input type="button" /> 
  
  <!-- 제출하는 버튼을 만드는 경우 -->
  <input type="submit" /> 
  
  <!-- 파일을 업로드하는 경우 -->
  <input type="file" /> 
  
  <!-- 그 외 -->
  <!-- checkbox, color, reset, search, url 등 -->
  
<form>

추가 attribute

placeholder="기본 안내 문구" : 기본적으로 안내 문구 제공

maxlength="15" : 입력 가능한 최대 문자 수

minlength="5" : 입력 가능한 최소 문자 수

required : 필수로 입력해야 하는 정보일 때 사용

disabled : 특정 인풋값을 사용하지 못하게 막아둘 때 사용

value="라이틱스" : 미리 입력이 되어있는 상태로 시작하고 싶을 때 사용

max="99" : 지정 가능한 최대값 <input type="number"> 에서 사용

min="5" : 지정 가능한 최대값 <input type="number"> 에서 사용

accept=".png, .jpg" : 파일의 확장자를 제한하고 싶을 때 사용 <input type="file"> 에서 사용