<input> - 다양한 정보 입력받기
- <input>태그는 type속성을 다르게 지장하여 다양한 입력 형태로 만들수있다.
type = " text" - 텍스트 입력받기
<body>
<label>아이디</label>
<input type="text"> ==> 타입을 text속성으로 지정
</body>
type = " password" - 비밀번호 입력받기
<body>
<label>비밀번호</label>
<input type="password"> ==> 타입을 password속성으로 지정
</body>
type = " checkbox" - 체크 박스 선택하기
- 복수선택 가능
<body>
<h4>취미</h4>
<label>스포츠</label>
<input type="checkbox" value="sports"> ==> 타입을 "checkbox" 속성으로 지정
<label>게임</label>
<input type="checkbox" value="game">
<label>요리</label>
<input type="checkbox" value="cook">
</body>
type = " radio" - 라디오 박스 선택하기
- 복수선택 불가능
<body>
<h4>직업</h4>
<label>UI/UX 디자이너</label>
<input type="radio" name="job" value="design"> ==> 타입을 "radio" 속성으로 지정
<label>프론트엔드 개발자</label>
<input type="radio" name="job" value="front-end dev">
<label>백엔드 개발자</label>
<input type="radio" name="job" value="back-end dev">
</body>
type = " file" - 파일 선택하기
<body>
<label>첨부 파일</label>
<input type="file"> ==> 타입을 "file"속성으로 지정
</body>
type = " color" - 색상값 선택하기
<body>
<label>색상 선택</label>
<input type="color"> ==> 타입을 "color"속성으로 지정
</body>
type = " date" - 날짜 선택하기
<body>
<label>날짜 선택</label>
<input type="date"> ==> 타입을 "date"속성으로 지정
</body>
type = "submit" , type = "reset" - 전송, 초기화 버튼
- 만약 버튼 이름을 다르게 지정하고 싶으면 value="텍스트" 속성추가하면 바뀜
<body>
<label>전송 취소</label>
<input type="reset"> ==> 타입을 "reset"속성으로 지정
<label>전송</label>
<input type="submit"> ==> 타입을 "submit"속성으로 지정
</body>
< select> - 드롭다운 메뉴로 항목 선택하기
- 부모태그 <select> 안에 자식태그 <option>으로 작성
- 사용자에게 보여줄 값은 <option>태그안에 작성
<body>
<select>
<option>HTML</option>
<option>CSS</option>
<option>JAVASCRIPT</option>
</select>
</body>
<textarea> - 텍스트를 여러 줄 입력받기
- type="text"는 간단한 텍스트를 입력받지만 <textarea>는 긴 문장의 텍스트를 입력받음
<body>
<textarea></textarea>
</body>
<form> - 여러 입력 양식을 그룹화하고 전송하기
- <form>태그는 여러가지 폼 요소를 그룹으로 만들어 백엔드 영역으로 전송
- <form>태그는 2가지 속성을 반드시 지정해야함
- action속성은 특정 주솟값이나 파일 위치
- method속성은 입력값의 전송 방식
<body>
<form action="/" method="post">
<label>아이디</label>
<input type="text">
<label>비밀번호</label>
<input type="password">
<input type="reset">
<input type="submit">
</form>
</body>
'FE > 인터렉티브 웹' 카테고리의 다른 글
| HTML에 CSS 연결하기 (0) | 2023.09.20 |
|---|---|
| 비디오 ·오디오 태그 - 멀티미디어 콘텐츠 삽입하기 (0) | 2023.09.19 |
| 목록 태그 - 메뉴를 깔끔하게 정리하기 (0) | 2023.09.18 |
| 서식태그 - 텍스트를 넣어 웹 페이지 채우기 (0) | 2023.09.18 |
| 시맨틱 태그 - 웹 페이지 구조 나누기 (0) | 2023.09.18 |