[8주차] 17. 태그: <input> 버튼, 체크박스, 라디오버튼을 만드는 기능

다양한 input의 타입

버튼

<input type="button" name ="aaa" value="버튼에 보여질 텍스트">

 

submit 버튼

- <form> 요소 내부에 존재한다면 form 속성 중 action으로 지정한 곳으로 이동하는 기능을 가짐 

<input type="submit" name ="aaa" value="버튼에 보여질 텍스트">

 

텍스트 입력칸

<input type="text" name ="aaa" value="텍스트 입력칸에 보여질 텍스트">

 

비밀번호 입력칸

- 입력한 값이 검은 동그라미로 보여짐

<input type="password" name ="aaa">

 

이메일 입력칸

- if(입력한거.indexOf('@') != -1) { return false } 와 같은 입력값 검증을 알아서 해줌

<input type="email" name ="aaa">

 

체크박스

- 같은 name을 가진 체크박스들이 존재할때 여러개 선택 가능

- 선택된 요소에는 자동으로 checked="checked" 속성이 붙게된다.(헷갈리는게 <select> 요소는 선택될 시 selected 속성)

<input type="checkbox" name ="singer" value="소녀시대">소녀시대

<input type="checkbox" name ="singer" value="방탄소년단">방탄소년단

<input type="checkbox" name ="singer" value="박재범">박재범

<input type="checkbox" name ="singer" value="레드벨벳">레드벨벳

 

라디오버튼 

- 같은 name을 가진 라디오 버튼들이 존재할때 그 중에서 최대 1개만 선택됨

- 선택된 요소에는 자동으로 checked="checked" 속성이 붙게된다.(헷갈리는게 <select> 요소는 선택될 시 selected 속성)

<input type="radio" name ="gender" value="female">

<input type="radio" name ="gender" value="male">

---

버튼만들기

* 버튼을 클릭하면 호출될 함수를 Javascript로 작성하여 onClick 속성으로 전달해줘야 하는데 그 예제는 아래를 참고해라.

   https://ldgeao99-developer.tistory.com/334

- onClick 속성에서 클릭되면 호출될 함수를 전달해줄 매개변수의 값과 함께 지정해줌
- onClick 속성을 주지 않으면 아무 동작을 하지 않는 버튼만 생성

<input type="button" value="버튼에 나타낼 텍스트" onClick="호출될 함수(파라미터)">

사용예시

---

다른 예시는 javascript 를 공부하면서 다루게될 예정이라 여기서는 추가 설명을 생략함.