Web 개발/HTML.CSS

HTML/CSS - button

hooni40 2021. 5. 29. 14:00
728x90
반응형

안녕하세요, 이번에는 button에 대해 정리해보겠습니다.

 

◆button 속성

autofocus : 페이지가 로드될 때 자동으로 포커스 (Boolean)

disabled : 버튼을 비활성화 (Boolean)

form : <form>의 id 속성 값

name : form 데이터와 함께 전송되는 버튼의 이름 

type : 버튼의 타입 (button(일반 버튼 / 기본값), reset(초기화), submit(서버로 제출))

 

이전에 input 태그를 이용하여 버튼을 만들었었는데요, button태그로도 동일한 기능의 button을 만들 수 있습니다!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <input type="reset" value="초기화">
    <button type="reset">초기화</button>
    <input type="submit" value="제출">
    <button type="submit">제출</button>
</body>
</html>

위와 같이 코드를 짜고 실행을 하면 아래처럼 동일한 버튼이 형성됩니다!

input / button 태그사용

 

reset, submit 말고 일반 button은 눌러도 아무런 효과가 없습니다.

이런 버튼은 자바스크립트를 사용하여 효과를 부여해줍니다!(나중에 자바스크립트까지 배운 후 정리하겠습니다)

 

 

728x90
반응형