[HTML] form 태그와 여러가지 태그 - input, label, textarea, button

728x90

SMALL

1. 폼(Form) 태그

웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그
사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용
웹페이지에서 내 정보를 서버로 보내거나 혹은 서버로 보내지 않더라도 자체 웹페이지에서 사용자와 상호작용을 하기 위해 입력값이나 버튼과 같은 이벤트 요소가 필요할때 사용되는 HTML의 태그

<form action='서버에게 전달할 파일 위치' method='전송방법'>
		form 태그 안에 form 요소를 통해 데이터를 서버로 전달
</form>

1-1. <form> 태그의 속성

입력 양식 전체를 감싸는 태그
form은 컨트롤 요소(control element)로 구성된다.

Form 태그의 속성	설명
method	전송방식 선택 get: url에 데이터를 포함하여 전달 post: body에 데이터를 포함하여 전달
name	form의 이름 서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용
action	form을 전송할 서버 쪽의 script 파일을 지정 전송되는 서버 url 또는 html 링크 # : 이동할 페이지가 없을 때
target	action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정

📍 <form></form> 태그 사이에 다른 <form> 태그가 삽입할 수 없고, <form> 의 이름 속성은 한 페이지에서 중복하여 사용할 수 없다.

2. <input> 태그

입력 상자
사용자가 정보를 입력하는 부분을 만들어야 할 때 사용
type에 따라 어떤 형식으로 폼 양식을 정할지 결정한다 (버튼 / 이메일 입력 / 비밀번호 입력 ..등)

2-1. input 태그의 type 속성

input type 속성	설명
text	문자를 입력받는 글상자
password	비밀번호를 입력받는 글상자
radio	여러개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버튼 ✔ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야함
checkbox	여러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼 ✔ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야함
file	원하는 파일을 서버로 전송하기 위한 글상자
button	이벤트가 없는 일반버튼
reset	입력받은 데이터를 초기화하는 버튼
submit	입력받은 데이터를 서버에 제출하는 버튼 ✔ form 태그의 action값으로 전달
hidden	보이진 않지만 서버에 값을 전달하고 싶을 때 사용하는 글상자
email	이메일을 입력받는 글상자(@필요)
url	웹사이트를 입력받는 글상자(http 필요)
tel	전화번호를 입력받는 글상자(모바일에서 숫자 키패드를 사용)
date	원하는 날짜를 입력받는 글상자
number	원하는 숫자를 입력받는 글상자 <input type="number" min="최소값" max="최대값" step="증가값">
color	원하는 색상을 입력받는 요소(선택한 색상은 16진수 RGB컬러값으로 서버에 전달)
search	검색어를 입력받는 글상자
range	일정 범위안에 값만을 입력하는 조절바 <input type="range" min="최소값" max="최대값" step="증가값" value="현재값">

2-2. input 속성

input 속성	설명
name	요소의 이름을 설정. 서버에서 값을 전달받을 때 key로 사용
id	요소의 유일한 이름을 설정. HTML문서에서 해당 요소의 스타일을 주거나 동적인 프로그래밍을 할 때 사용 ✔ 같은 HTML문서 내에서 다른 요소와 같은 id를 가질 수 없음
maxlength	값의 최대 길이를 설정
placeholder	입력 전 특정 데이터를 입력하도록 안내하는 값을 설정
value	서버로 전달할 입력 양식의 값을 설정 ✅name(key) - value(value)
checked	라디오 또는 체크박스 중에서 미리 선택하는 옵션을 설정
readonly	데이터를 볼 수 있으나 수정할 수 없게 설정
disabled	입력필드를 사용할 수 없게 설정
required	데이터를 submit 할 때 데이터를 필수로 입력하도록 강제하는 설정

3. <label> 태그

폼 양식에 이름을 붙이는 요소
다른 요소를 연결하면 해당 영역이 넓어짐
radio checkbox의 스트일을 설정시 많이 사용됨

<label for='요소의 id'>텍스트 또는 이미지</label>

4. <button> 버튼 태그

버튼을 생성하는 요소
초기 속성은 submit 과 동일
type="reset", type="button", type="submit"(default)

<button>버튼 클릭</button>

5. <select> 선택 상자

여러개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의 옵션만을 선택

<select>
    <option value="apple">김사과</option>
    <option value="banana">반하나</option>
    <option value="orange">오렌지</option>
</select>

6. <textarea> 여러줄 줄상자

여러줄의 텍스트를 입력받는 글상자
value값 태그 안이 아니라 태그 사이에 입력

<textarea cols="가로 글자 수" rows="세로 줄 수">value값</textarea>

✅ form태그 내 여러가지 태그를 적용하여 알아보자.

<!DOCTYPE html>
<html lang="en">
<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>폼 태그</title>
</head>
<body>
    <h2>폼 태그</h2>
    <form action="#" method="post">
        <p><input type="hidden" name="hidden" value="서버로 전달될 값"></p>

        <p>아이디: <input type="text" name="userid" id="userid" maxlength="20" placeholder="아이디를 입력하세요" required>
        </p>

        <p>비밀번호: <input type="password" name="userpw" id="userpw" maxlength="20" placeholder="비밀번호를 입력하세요" required>
        </p>  
        
        <p>성별: <label for="male">남자</label> 
            <input type="radio"id='male' name="gender" value="남자" checked>
            <label for='female'>여자</label>
            <input type="radio" id='female' name="gender" value="여자">
        </p>
        <p>취미: 운동<input type="checkbox" name="'hobby" value="운동"> 음악감상<input type="checkbox" name="'hobby" value="음악감상"> 영화감상<input type="checkbox" name="'hobby" value="영화감상"> 게임<input type="checkbox" name="'hobby" value="게임"> 등산<input type="checkbox" name="'hobby" value="등산"></p>
        <p>첨부파일: <input type="file" name="file"></p>
        <p>나이: <input type="text" name="age" value="-1" readonly></p>
        <p>주민등록번호: <input type="text" name="ssn" disabled></p>

        <p>직업: 
            <select name="job">
                <option value="프로그래머">프로그래머</option>
                <option value="공무원">공무원</option>
                <option value="전문직">전문직</option>
                <option value="학생">학생</option>
                <option value="전문직">취준생</option>
        </select></p>
        <p>자기소개</p>
        <p><textarea name="content" cols="50" rows="5"></textarea></p>

        <p>이메일: <input type="email"></p>
        <p>웹사이트: <input type="url"></p>
        <p>휴대폰번호: <input type="tel"></p>

        <p>생년월일: <input type="date"></p>
        
        <p>좋아하는 숫자: <input type="number" min="1" max="10" step="1"></p>

        <p>좋아하는 색상: <input type="color"></p>

        <p>검색어를 입력하세요: <input type="search"></p>

        <p>프로그래밍 능력: <input type="range" min="0" max="5" value="3"></p>       

        <p><input type="button" value="클릭하세요" onclick="alert('메롱😛')"> <input type="reset" value="다시 입력"> <input type="submit" value="회원가입"> <button type="reset">버튼 클릭</button></p>


        <!--id 속성이 다른건 상관없음-->
    </form>
</body>
</html>

728x90

LIST

'Web > HTML' 카테고리의 다른 글

[HTML] 시맨틱 태그(Semantic Tag) (0)	2023.03.28
[HTML] HTML의 디스플레이 - inline, block, inline-block (0)	2023.03.28
[HTML] 아이프레임 만드는 법 - 웹사이트 내 웹사이트 삽입하기 (0)	2023.03.27
[HTML] 테이블 만드는 법 - 테이블 속성 설정하기 (1)	2023.03.27
[HTML] 책갈피 기능 만드는 법 - 페이지 내 이동하기 (0)	2023.03.27

코딩하는 춘식이

[HTML] form 태그와 여러가지 태그 - input, label, textarea, button

1. 폼(Form) 태그

1-1. <form> 태그의 속성

2. <input> 태그

2-1. input 태그의 type 속성

2-2. input 속성

3. <label> 태그

4. <button> 버튼 태그

5. <select> 선택 상자

6. <textarea> 여러줄 줄상자

'Web > HTML' 카테고리의 다른 글

티스토리툴바

[HTML] form 태그와 여러가지 태그 - input, label, textarea, button

1. 폼(Form) 태그

1-1. <form> 태그의 속성

2. <input> 태그

2-1. input 태그의 type 속성

2-2. input 속성

3. <label> 태그

4. <button> 버튼 태그

5. <select> 선택 상자

6. <textarea> 여러줄 줄상자

'Web > HTML' 카테고리의 다른 글

관련글

티스토리툴바