들어가기 전에
웹 사이트에는 사용자의 입력을 요구하는 때도 있습니다.
예를 들어 사용자로부터 텍스트를 입력받거나 아니면 선택을 하게끔 하는 경우가 이에 해당합니다.
사용자로부터 데이터를 받아야 하는 경우 사용되는 요소들을 폼 요소라고 합니다.
폼 요소의 종류에 대해 알아보고 적절한 형식으로 데이터를 입력받는 방법에 대해 알아보겠습니다.
핵심키워드
학습하기
폼 요소는 서버에 데이터를 전달하기 위한 요소이며 <input>은 대표적인 폼 요소입니다.
<input>은 내용이 없는 빈 요소이며 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 됩니다.
본 강의에서는 자주 사용되는 type들만 다루니 나머지는 아래 링크를 참고하시기 바랍니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
type="text"
<input type="text" placeholder="ㅇㅇㅇ">주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용합니다.
type="text"에는 placeholder 속성이 존재합니다.
placeholder 속성은 사용자가 입력하기 전 미리 화면에 노출하는 값으로, 입력하는 값의 양식을 표현할 수 있습니다.
type="password"
<input type="password">암호와 같이 공개할 수 없는 내용을 입력할 때 사용합니다.
화면에는 type="text"와 같게 나타나지만 실제로 입력할 때 값을 노출하지 않습니다.
type="radio"
<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자
라디오 버튼을 만들 때 사용합니다.
라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 합니다.
type="checkbox"
<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동
체크박스를 만들 때 사용합니다.
체크박스는 중복 선택이 가능합니다.
본 강의에서는 다루지 않았지만, 라디오 버튼과 체크박스에는 checked, name 속성이 존재합니다.
checked 속성은 값이 별도로 존재하지 않는 boolean 속성입니다.
boolean 속성은 true/false 둘 중 하나의 값을 가지며 속성이 존재하면 true,
속성이 존재하지 않으면 false를 가집니다.
name 속성은 라디오 버튼과 체크박스를 그룹화시켜주는 속성입니다.
아직 name 속성을 다루기 전이므로 실제 버튼을 클릭했을 경우 동작하는 방식에 대해서만 알아두시기 바랍니다.
참고링크
https://developer.mozilla.org
comment
완료
감사합니다.
1.5
<!DOCTYPE html>
<html>
<head>
<title>폼 요소</title>
</head>
<body>
<input type="text" placeholder="ㅇㅇㅇ"> <!--
주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용
type="text"에는 placeholder 속성이 존재한다.
placeholder 속성은 사용자가 입력하기 전 화면에 노출하는 값으로,
입력하는 값의 양식을 표현할 수 있다. -->
<input type="password"> <!-- 암호와 같이 공개할 수 없는 내용을
입력할 때 사용한다. 화면에는 type="text"와 같게 나타나지만 실제로
입력할 때 값을 노출하지 않는다. -->
<input type="radio" name="gender">남자
<input type="radio" name="gender">여자
<!-- 라디오 버튼을 만들 때 사용한다.
라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을
선택해야 한다. -->
<input type="checkbox" name="hobby">등산
<input type="checkbox" name="hobby">독서
<input type="checkbox" name="hobby">운동
<!-- 체크박스를 만들 때 사용한다.
체크박스는 중복 선택이 가능하다. -->
</body>
</html>
<Form>사용자로부터 입력을 받을 수 있는 HTLM 입력 폼
---
<input>입력 필드 선언
<input type="">
---
input type
<input type="text" placeholder="">
placeholder 사용자가 입력하기 전 미리 화면에 노출하는 값(가이드)
<input type="radio" name="">
하나만 선택해야 할 때 사용
동일한 name값을 지정해야 하나의 항목만을 선택하게 됨.
<input type="checkbox">
체크박스는 중복 선택 가능
---
<input type="radio">, <input type="checkbox">
checked, name 속성이 존재
checked : 값이 없음, 미리 선택되어진 상태로 나타남.
2023.01.10
오오 신기방기
<input type="text" placeholder="영문으로만 써주세요"><br>
라디오랑 체크박스 예제가 너무 .. 저렇게 못쓰잖아요 value 라도 적어줘야하는거 아닌가요?
아이디 <input type="text" placeholder="영문으로 써주세요.">
text : 사용자가 입력 전 미리 화면에 노출
placeholder : 가이드
비밀번호 <input type="password">
password : 화면에 점으로 표시됨
남자 <input type="radio" name="gender" checked>
radio : 동그란 체크표시
gender : 성별
checked : 값이 별도로 존재하지 않는 boolean, 속성이 존재하면 true
name : 그룹화
수영 <input type="checkbox" name="hobby" checked>
checkbox : 네모난 체크표시, 여러 네모 선택 가능
input 태그
text : text 입력 창
placeholder : 입력 창 안에 안내 메시지 작성, 입력 시 사라짐
password : 비밀번호를 입력할 때(입력 시 입력값이 보이지 않음)
radio btn : 1개만 선택할 때, 상호배타적인 항목들 사이에 씀
name : 같은 성격의 값을 묶어줌
checked : 값 없음, 이름만 적어두면 됨, 사용자가 선택하지 않더라도 미리 선택된 상태로 나옴
checkbox : 중복 선택 가능
<input type="text" placeholder="영문으로만 입력해 주세요."
<input type="password">
<input type="radio" name="gender" checked>
<input type="checkbox" name="hobby" checked>
폼 요소(Form)
= 서버에 데이터 전달하는 요소
<form>
아이디: <input type="text" placeholder="이름을 입력하시오.">
<br>
비밀번호: <input type="password" placeholder="비밀번호를 입력하시오.">
<br>
성별: 남<input type="radio" name="gender"> 여<input type="radio" name="gender">
<br>
선호 과일: 사과<input type="checkbox" name="fruits"> 수박<input type="checkbox" name="fruits">
</form>
Input type=”text”
ID, 이름, 주소처럼 텍스트를 직접 입력하는 경우 주로 사용
placeholder 속성을 이용하여 사용자가 입력하기 전 힌트 제공
Input type=”password”
비밀번호 입력시 사용
화면에 노출되지 않지만 서버 전달시 실제 값 전달
Input type=”radio”
선택지 중 하나만 선택해야할 때 사용
name 속성으로 그룹핑 작업
Input type=”checkbox”
선택지 중 여러 개를 선택해야할 때 사용
checked 속성으로 미리 선택되어 있게 표시 가능 (값이 없음)
4.26
<div>
아이디 : <input type="text" placeholder="영문 입력">
비밀번호 : <input type="password"><br>
성별 : 남자<input type="radio" name="gender"> 여자<input type="radio" name="gender"><br>
<!-- name 속성은 라디오 버튼과 체크박스를 그룹화시켜주는 속성입니다. 동일한 카테고리면 name값을 동일하게! -->
취미 : 음악감상<input type="checkbox" name="hobby"> 운동<input type="checkbox" name="hobby"> 여행<input type="checkbox" name="hobby"><br>
<!-- checkbox는 중복선택 가능 -->
<!-- checked는 값이 별도로 존재하지 않는 블리언(boolean) 속성.
boolean 속성은 true/false 둘 중 하나의 값을 가지며 속성이 존재하면 true, 속성이 존재하지 않으면 false를 가집니다. 보통 미리 체크가 되어 있는 기본값으로 활용 radio와 checkbox에 적용가능-->
병역 : 해당사항 없음<input type="radio" name="duty" checked> 해당<input type="radio" name="duty">
</div>
12 21 완료
<input type="text" placeholder="영문으로만 입력해 주세요."
<input type="password">
<input type="radio" name="gender" checked>
<input type="checkbox" name="hobby" checked>
21.11.08
21.11.01 힘내자!
2021.7.29
0708
21.7.6.