[HTML] input 과 button

2023. 2. 22. 16:42Web/HTML

1. input 태그의 value 속성

 

input 태그의 value 속성은 type 속성값에 따라 다르다

  • button, reset, submit: 버튼 내 텍스트
  • hidden, password, test: 입력 필드의 초깃값
  • check, image, radio: 해당 입력필드를 선택시 서버로 제출되는 값 정의
  • file: value X. 

2. button 태그의 type 속성

  • submit: form을 제출하는 이벤트를 발생시킨다.
  • reset: form안에 작성된 내용 초기화
  • button: 그 자체에 이벤트가 없다. 자바스크립트와 연결

default값은 submit


3. button 태그의 input 태그의 차이

  • input 태그는 스스로 닫는 태그. 즉, 하위태그를 추가할 수 없다.
  • button 태그는 하위 태그를 추가할 수 있다. 즉, input 태그에 비해 디자인적 제약이 없다. 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>연습장</title>
    </head>
    <body>
        <p>input</p>
        <input type="button" value="input">
        <p>button</p>
        <button>버튼은 <span style="color: red;">input</span>과 다르게 하위태그를 추가할 수 있다.</button>
    </body>
</html>

 

'Web > HTML' 카테고리의 다른 글

[HTML] 입력 양식 작성하기  (0) 2022.06.29
[HTML] 다양한 내용 입력하기  (0) 2022.02.10
[HTML] 소개  (0) 2022.02.10