<button> vs <input>

😄 button

• 열고 닫는 태그라서 하위 요소 추가 가능

// Type
<button type="submit" value="1">button1</button>
<button type="button" disabled>button2</button>
<button type="reset" autofocus>button3</button>

type="submit" ?

• 폼 전송 기능 (default)
• value=" " : type이 submit일 때 초기값
• name=" " : type이 submit일 때 버튼 이름

type="reset" ?

• 폼 내용 초기화 기능

type="button" ?

• 일반적으로 click 이벤트와 연결시켜서 JavaScript 활용

disabled ?

• 비활성화, 사용자가 버튼을 사용 못하게 한다

autofocus ?

• 페이지가 로드될 때 포커스가 자동으로 버튼으로 이동

😄 input

• 스스로 닫는 태그라서 하위 요소 추가 불가능

<input type="text"> // 텍스트 박스
<input type="checkbox"> // 체크 박스
<input type="color"> // 색 지정할 수 있는 컨트롤
<input type="date"> // 날짜 지정할 수 있는 컨트롤
<input type="email"> // 이메일 주소 편집 가능, 유효성 검증 매개변수 존재 
<input type="file"> // 파일을 지정할 수 있는 컨트롤
<input type="number"> // 숫자 입력하는 컨트롤
<input type="image"> // image input
<input type="radio"> // 같은 값을 가진 여러개의 선택지중에서 한개만 선택 가능
<input type="submit"> // 양식 전송하는 버튼

• 순수 html, css, js로 프로젝트를 진행한다면 HTML의 동적인 코드들은 JS 파일에 작성하는 것이 좋다 EX) onclick같은 event
• input 태그는 type 특성에 따라 현격히 달라진다 (default : text)

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍