1. placeholder 속성
- <input> 태그에 type속성을 text로 지정하면 한 줄 텍스트를 입력하는 영역을 만들 수 있다. (이름 입력, 검색 박스 등을 만들때 사용)
<input type="text" placeholder="입력해주세요">
2. 라디오 버튼 <input type = “radio”>
- 여러 선택지 중에서 하나만 선택하게 만들고 싶으면 라디오 버튼 사용 → 사용자가 한개를 클릭해서 선택하면 자동으로 다른 선택지는 선택할 수 없다. → name속성을 일치시켜 하나의 그룹으로 만들 수 있다. → 이렇게 하나의 그룹으로 만들면 그 그룹 중에서 1개만 선택할 수 있게 된다.
- name : 라디오 버튼의 이름
- value : 전송될 선택지의 값
- checked : 처음부터 선택돼 있게 하고 싶을 때 저장
<body>
성별 :
<input type="radio" name="gender" value="남자"> 남자
<input type="radio" name="gender" value="여자" checked> 여자
<input type="radio" name="gender" value="그 외"> 그 외
</body>
3. 체크 박스 <input type = “checkbox”>
- 라디오 버튼과는 다르게 여러 개의 항목을 선택 가능 → 라디오 버튼처럼 name 속성을 일치시켜 하나의 그룹으로 만들 수 있다.
- name : 체크 박스의 이름
- value : 전송될 선택지의 값
- checked : 처음부터 선택돼 있게 하고 싶을때 지정
<body>
<input type="checkbox" name="color" value="붉은색" checked> 붉은색
<input type="checkbox" name="color" value="파란색"> 파란색
<input type="checkbox" name="color" value="노란색"> 노란색
<input type="checkbox" name="color" id="초록색"> 초록색
</body>
4. 전송 버튼 <input type = “submit”>
- name : 버튼의 이름
- value : 버튼에 출력되는 글자
<body>
<input type="submit" value="전송">
</body>
5. 날짜 선택 <input type="date">
<input type="date" name="" id="">
6. 버튼을 이미지로
- name : 버튼의 이름
- src : 버튼에 사용하고 싶은 이미지 파일의 경로, 파일 이름
- alt : 이미지를 설명하는 글자 (x)
<body>
<input type="image" src="../images/button.png">
</body><id와 value의 차이>
- id → HTML 요소를 고유하게 식별하기 위해 사용되는 속성 → id 속성은 해당 요소의 고유한 식별자(identifier)를 지정 → 각 요소는 하나의 id를 가져야 하며, 동일한 id는 문서 내에서 중복해서 사용할 수 없다. ⇒ id는 CSS나 자바스크립트에서 특정 요소를 선택하고 조작하는 데 사용 1. 특정 id를 가진 요소에 스타일을 적용 2. 자바스크립트에서 해당 요소를 선택하여 이벤트를 처리
- value → HTML 폼 요소에서 사용자가 입력한 값을 나타내는 속성 → value 속성은 input 요소와 같은 폼 컨트롤 요소에서 주로 사용 → 사용자 입력 데이터는 value 속성에 저장되어 서버로 전송되거나 javaScript에서 접근 가능 → 체크박스의 경우, value 속성은 체크박스가 선택됐을 때 해당 값을 나타낸다. ex) <input type="checkbox" name="color" value="붉은색"> value 속성은 "붉은색"을 나타낸다.
Share article
