프론트앤드/HTML

[포스코x코딩온] 웹개발자 입문 과정 1주차 회고-04 | HTML Form 태그

영최 2023. 3. 3. 12:24
728x90

 사용자 입력 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태그 안에 넣지 않아도 사용 가능 하다는 것을 알 수 있었다.

 

728x90