HTML_Form 이란?

jjyu_my·2024년 1월 19일

개발공부 기술블로그

HTML & CSS

목록 보기

7/19

📌 Form(폼) 이란?

웹 페이지에서 사용자로부터 정보를 입력받아 서버로 제출하기 위한 요소입니다.
사용자가 웹 페이지에 정보를 입력하고, 이를 서버로 전송하여 처리할 수 있도록 하는 기능을 제공합니다.

1️⃣ 주요 속성

액션(Action): 폼 데이터를 전송할 서버 쪽 스크립트 파일의 URL을 지정합니다.
메소드(Method): HTTP 메소드를 지정합니다.
GET:
데이터를 URL에 포함시켜 전송하며, 주소창에 데이터가 노출됩니다. (보안에 취약)
POST:
데이터를 HTTP 요청 본문에 담아 전송하며, 주소창에 데이터가 노출되지 않습니다. (보안 강화)
아이디(ID): 폼의 식별자를 지정합니다.

2️⃣ 주요 폼 요소

< input> 태그: 가장 대표적인 폼 요소로, 다양한 타입으로 사용됩니다.
타입(Type):
텍스트, 이메일, 패스워드, 라디오, 체크박스, 버튼, 날짜, 파일, 숫자, 컬러 등 다양한 형태로 지정 가능합니다.
네임(Name): 데이터를 서버로 제출할 때 사용되는 이름을 지정합니다.
벨류(Value): 인풋값의 초기값을 설정하거나, 제출할 때의 값을 지정합니다.
플레이스홀더(Placeholder): 입력값이 없을 때 힌트를 제공합니다.
리콰이얼드(Required): 사용자가 입력하지 않으면 제출 시 경고창을 표시합니다.
디세이블드(Disabled): 해당 입력 요소를 비활성화합니다.
< button> 태그: 버튼을 생성할 때 사용됩니다.
레이블(label):
해당 인풋이 어떤 입력인지 설명해주는 역할을 합니다
인풋과은 항상 레이블과 함께 쓰는것이 좋습니다

<body>
    <form>
        <h1>Sign In</h1>
        <div>
            <label for="eamil">Email :</label>
            <input type="email" id="email" name="useremail" placeholder="Email을 입력하세요">
        </div>
        <!-- <br> -->

        <div>
            <label for="pw">PW :</label>
            <input type="password" id="pw" name="password" placeholder="비밀번호를 입력하세요">
        </div>

        <input type="submit" value="로그인">
    </form>
</body>

checkbox
사용자에게 선택(체크) 여부를 나타내는데 사용되는 HTML 폼 요소입니다. 각 체크박스는 독립적으로 다른 체크박스와 상호작용하며, 여러 항목 중에서 원하는 항목을 선택할 수 있도록 합니다.

값
type="checkbox": 체크박스의 타입을 지정합니다.
name: 서버로 전송될 때 체크박스의 그룹을 식별하는 이름을 지정합니다.
value: 체크박스의 값. 체크박스가 선택되었을 때 전송되는 값입니다. 사용자에게 노출되지는 않습니다.
체크박스에서 벨류가 명시되지 않으면 defajult value 는 on으로 전송됩니다.
checked: 초기에 체크박스가 선택되어 있는 상태로 만들 때 사용합니다.
radio
라디오 버튼은 여러 옵션 중 하나를 선택하는 데 사용되는 폼 요소입니다. 라디오 버튼은 동일한 name 속성을 가진 여러 개의 버튼 그룹으로 구성되며, 각 그룹에서는 하나의 버튼만 선택할 수 있습니다.

💡radio 사용시 주요 속성과특징
타입(Type): 라디오 버튼은 type="radio"로 지정합니다.
네임(Name): 라디오 버튼 그룹을 식별하는 데 사용되는 이름을 지정합니다. 동일한 그룹은 동일한 name을 가져야 합니다.
값(Value): 각 라디오 버튼에 할당된 값으로, 선택된 버튼의 값이 서버로 전송됩니다.
체크드(Checked): 기본적으로 선택되어 있으면 checked 속성을 사용합니다.
라벨(Label): 사용자에게 라디오 버튼이 어떤 목적을 가지고 있는지 알려주기 위해 라벨 요소와 함께 사용됩니다.
셀렉트 박스(select box) :

사용자가 목록에서 항목을 선택할 수 있는 드롭다운 형태의 폼 요소입니다. 주로 여러 옵션 중 하나를 선택할 때 사용되며, 사용자에게 목록을 시각적으로 제공 합니다.

HTML_Form 이란?

HTML & CSS

📌 Form(폼) 이란?

1️⃣ 주요 속성

2️⃣ 주요 폼 요소

셀렉트 박스(select box) :

HTML_ol, ul, li 그리고 a 태그

CSS_hover, active, focus

0개의 댓글