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>위와 같이 코드를 짜고 실행을 하면 아래처럼 동일한 버튼이 형성됩니다!
reset, submit 말고 일반 button은 눌러도 아무런 효과가 없습니다.
이런 버튼은 자바스크립트를 사용하여 효과를 부여해줍니다!(나중에 자바스크립트까지 배운 후 정리하겠습니다)
728x90
반응형
'Web 개발 > HTML.CSS' 카테고리의 다른 글
| HTML/CSS - 가상 클래스 선택자(1) (0) | 2021.05.31 |
|---|---|
| HTML/CSS - select / option/datalist (0) | 2021.05.30 |
| HTML/CSS - input (0) | 2021.05.28 |
| HTML/CSS - form (0) | 2021.05.27 |
| HTML/CSS - Inline/block (0) | 2021.05.22 |
댓글