사용자 입력 Form 태그
● 사용자 입력 Form 태그- 1. 입력 값 받기! <input>
- type: button, text, password, checkbox, radio, date, color, range, file
● 사용자 입력 Form 태그- 2. 버튼, type=“button”
- 버튼을 생성
- 주로 특정 기능을 수행시킬 때 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form tag 종류에 대해서 알아보자</title>
</head>
<body>
<!-- 사바와 관련된 속성 -->
<!-- <form action="" method=""></form> -->
<form >
<input type="button" value="버튼">
<!-- value="buttom"으로 글씨 쓸 수 있음 -->
<input type="submit" value="제출">
● 사용자 입력 Form 태그- 3. 텍스트, type=“text”
- 텍스트 입력값을 받는 폼을 생성
- 우리가 입력하는 ID의 입력 부분
- 텍스트 값을 입력 받아 전달하는 기능
● 사용자 입력 Form 태그- 4. 패스워드, type=“password”
- 비밀번호 값을 받는 폼을 생성
- 입력 값을 자동으로 안보이게 처리
- 중요하거나 비밀 텍스트 값을 전달하는 기능
● 사용자 입력 Form 태그- 5. 체크 박스, type=“checkbox”
- 여러 선택지 중 여러개를 선택 가능 한 체크박스 생성
- 속성
- Name : 체크박스의 이름, 같은 분류의 체크 박스는 같은 이름으로 설정
- Value : 체크 박스가 실제로 전달하는 값을 지정
- Checked : 화면 최초 로딩 시에 선택된 상태로 로딩
● 사용자 입력 Form 태그- 6. 라디오 버튼, type=“radio”
- 여러 선택지 중 하나만 선택 가능한 라디오 버튼 생성
- 속성
-Name : 라디오 버튼의 이름, 같은 name을 가지는 라디오 버튼은 하나만 선택이 가능
-> 하나를 선택하면 다른 선택 값이 취소됨
-Value : 라디오 버튼이 실제로 전달하는 값을 지정
-Checked : 화면 최초 로딜 시에 선택된 상태로 로딩
● 사용자 입력 Form 태그- 7. 날짜 선택, type=“date”
- 특정 날짜(년/월/일)을 선택
- 속성
- Name : 날짜 선택 폼 이름
- type : "datetime-local"
- 시간까지 선택 가능
- 기존은 "datatime"을 사용하였으나 시간은 시간대의 영향을 받으므로 정확한 데이터 값 전달이 불가능 하여 지금은 사용 안함
● 사용자 입력 Form 태그- 8. 선택 메뉴를 만드는, <select>
- 선택 메뉴(드롭 다운)을 만드는 태그
- <select> : select 폼 생성
- Name : select 박스의 이름
-<option> : select 폼의 옵션 값 생성
-Value : 실제적으로 전달되는 값
-Selected : 최초에 선택값으로 설정
-<optgroup> : option을 그룹화
-label : optgroup 이름 설정
-Disabled : 옵션은 보이지만 선택을 못하도록 설정
<form>태그 안에 다양한 태그 <input>,<button> 이 있고 <input>태그 내에 속성값을 어떻게 주느냐에 따라
다른 형식으로 사용할 수 있다는 것을 배울 수 있었다.
나중에 알게된 것은 <form>태그와 백앤드를 연결해서 사용하고,
input 태그의 경우 form태그 안에 넣지 않아도 사용 가능 하다는 것을 알 수 있었다.
'프론트앤드 > HTML' 카테고리의 다른 글
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-06 | HTML table (0) | 2023.03.03 |
|---|---|
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-05 | HTML 실습2 (0) | 2023.03.03 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-03 | HTML 실습1 (0) | 2023.03.03 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-02 | HTML tag의 종류 (0) | 2023.03.03 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-01 | HTML 기초 학습 (0) | 2023.03.02 |