10) Form 요소 1
Form 요소는 서버에 데이터를 전달하기 위한 요소이며, <input> 태그는 대표적인 Form 요소 태그다. <input>은 내용이 없는 빈 요소이며, type 속성을 통해 여러 종류의 입력 양식으로 나타나게 된다.
하지만 Form 태그 안의 태그들을 동작시키려면 <form> 태그에 action이라는 속성을 부여해서 어떤식으로 동작할지 명시해줘야한다.
하나의 예시 코드를 들어보자면,
<form action="/test.html"> <!-- submit, reset 테스트를 위해 입력함 -->위와 같이 작성한 Form이 submit(제출)되면, /test.html로 이동하는 action 속성을 부여했다.
● type="text"
아이디: <input type="text" placeholder="아이디를 입력해주세요."><br>
주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용하고, type="text"에는 placeholder 속성이 존재하는데, 이 placeholder 속성은 사용자가 입력하기 전 미리 화면에 노출하는 값으로, 입력하는 값의 양식을 표현할 수 있다.
● type="password"
패스워드: <input type="password" placeholder="패스워드를 입력해주세요."><br>
암호와 같이 공개할 수 없는 내용을 입력할 때 사용하는데, 화면에는 type="text"와 같게 나타나고 placeholder 속성을 갖지만, 실제로 입력한 값을 노출하지 않는다.
● type="radio"
성별: 남자<input type="radio" name="gender"> 여자<input type="radio" name="gender"><br>
radio 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야할 때 쓰고, name 속성을 써서 어떤 값을 물어보려 하는지 그룹화하여 분류한다.
● type="checkbox"
취미: 운동<input type="checkbox" name="hobby"> 영화<input type="checkbox" name="hobby"> 게임<input type="checkbox" name="hobby"><br>
checkbox는 중복된 여러 값을 선택할 수 있는 버튼으로, radio와 마찬가지로 name 속성으로 어떤 값을 물어보려 하는지 그룹화하여 분류한다.
추가로 radio와 checkbox에는 checked 속성이 존재하는데, checked 속성은 값이 별도로 존재하지 않는 boolean 속성이다. boolean 속성은 true/false 둘 중 하나의 값을 가지며 checked 속성이 존재하면 true로 체크하지 않아도 체크가 돼있고, checked 속성이 존재하지 않으면 false를 가진다.
11) 폼 요소 2
● type="file"
프로필 사진 업로드: <input type="file"><br>
파일을 서버에 올릴 때 사용하는 타입으로, 브라우저에 따라 표현되는 형태는 조금씩 다르지만 모두 같은 역할을 한다.
● type="submit" | "reset" | "button" | "image"
<input type="submit" value="전송"><br>
<input type="reset" value="초기화"><br>
<input type="button" value="등록"><br>
<input type="image" src="https://lh3.googleusercontent.com/proxy/ndWWDQnWWSrYE2TyYgDhXxIeLzhNxWf3qW_ISGNj1iWCggonfZEdO8VLBvJS_A0adOz5KJ7arAwVhBSLwVTLzt4GImHOzX662j1sE5j9n5_XTLk3NbSO8Gv60AePzMw1QodfuAnlNP5ejYySVoKBO5QlqDy1gIQ" alt="로그인" width="100" height="50">
- submit : form의 값을 서버로 전송하는 버튼
- reset : form의 값을 초기화하는 버튼
- button : 아무 기능이 없는 버튼 (JavaScript로 어떤 동작을 하게끔 명시할 수 있음)
- image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함)
image 버튼은 이미지 관련 속성인 src, alt 속성이 반드시 필요하며 width/height 속성을 적용할 수도 있고, submit, reset, button 버튼은 value 속성으로 버튼에 표시되는 값을 바꿀 수 있다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
: The Input (Form Input) element
The HTML input element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
developer.mozilla.org
최종코드
<body>
<form action="/test.html"> <!-- submit, reset 테스트를 위해 입력함 -->
<h1>Form 관련 요소</h1>
아이디: <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="hobby"> 영화<input type="checkbox" name="hobby"> 게임<input type="checkbox" name="hobby"><br>
프로필 사진 업로드: <input type="file"><br>
<input type="submit" value="전송"><br>
<input type="reset" value="초기화"><br>
<input type="button" value="등록"><br>
<input type="image" src="https://lh3.googleusercontent.com/proxy/ndWWDQnWWSrYE2TyYgDhXxIeLzhNxWf3qW_ISGNj1iWCggonfZEdO8VLBvJS_A0adOz5KJ7arAwVhBSLwVTLzt4GImHOzX662j1sE5j9n5_XTLk3NbSO8Gv60AePzMw1QodfuAnlNP5ejYySVoKBO5QlqDy1gIQ" alt="로그인" width="100" height="50">
</form>
</body>
https://www.edwith.org/boostcourse-cs-htmlcss/joinLectures/33588
[부스트코스] 비전공자를 위한 HTML/CSS 강좌소개 : edwith
- 부스트코스
www.edwith.org
위 2개의 내용은 부스트코스 무료 강의에서 들을 수 있다🥰
댓글