Multi Developer SuHo

HTML 폼(form) 태그 , <input>(위젯) 본문

html5+CSS3

HTML 폼(form) 태그 , <input>(위젯)

Dreaming Developer Student 2024. 2. 5. 19:26
SMALL

안녕하세요~ 오늘은 폼 (form) 태그와 input 태그(위젯)에 대해 알아보겠습니다.
글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.
https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90

 

[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런

도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/

www.inflearn.com


폼 <form> 태그부터 살펴보겠습니다.  HTML 에서  폼 <form>  태그는 사용자에게 정보를 입력받는 영역을 생성하는 데 사용됩니다.  예를 들면 사용자 이름, 사용자 정보, 비밀번호, 연락처 정보 등을 입력받을 수 있습니다. 폼 <form> 태그는 여는 태그와 닫는 태그 사이에 하나 이상의 input 위젯으로 구성됩니다.  여기서 <input> 위젯은 사용자로부터 직접적인 데이터 입력을 받는 요소로, 텍스트 필드, 비밀번호 필드, 체크박스, 라디오 버튼, 파일 업로드 필드 등 다양한 형태를 구성할 수 있습니다.  다음은 폼 태그와 <input> 위젯을 활용한 소스코드입니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
    <style></style>
</head>
<body>
<form>
    <input type="text" placeholder="정보를 입력하세요"> 
     <!-- <input> 태그는 닫는 태그가 따로 없는 싱글 태그
     텍스트로 입력받아야 해서 type 속성은 "text로 지정하고"
     input 위젯에 어떤 값을 입력해야 하는지 알려주는 역할을 하는 "placeholder" 속성을 추가
     -->
</form>
</body>
</html>

 




이렇게 입력창이 생성되고, 텍스트 필드안에 텍스트를 입력할 수 있고,  "placeholder" 속성에 "정보를 입력하세요" 문구가 나타나는 것을 확인할 수 있습니다.
input 위젯을 활용한 계정 생성 폼을 만든 소스코드 입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
    <style></style>
</head>
<body>
<form>
    <input type="text" placeholder="사용자 이름">
    <input type="email" placeholder="이메일">
    <input type="password" placeholder="비밀번호">
    <input type="button" value="계정 생성">
     
</form>
</body>
</html>


텍스트 필드에 대한 type="text"로 지정하고,  이메일 필드에 대한 type="email",  패스워드 필드는 type="password" ,  버튼을 생성하고 type="button"으로 지정합니다. 각각 placeholder 속성을 사용하여 각각에 텍스트를 화면에 나타주도록 합니다.


이렇게  폼 태그와 input 태그(위젯)에 대해 알아보았습니다. 
코드에선 <input type="button"> 타입으로 지정되어 있지만 "submit", "reset" 등  버튼의 동작을 지정할 수 있습니다. 
1. Button (<button> 또는 <input type="button">): 기본 버튼으로, 특별한 동작을 갖지 않습니다.

2. Submit (<button type="submit"> 또는 <input type="submit">): <form> 태그 내부에서 사용되며, 양식을 제출하는 데 사용됩니다. 사용자가 이 버튼을 클릭하면, 양식 데이터가 서버로 전송됩니다.

3.Reset (<button type="reset"> 또는 <input type="reset">): <form> 태그 내부에서 사용되며, 양식의 모든 입력 필드를 초기 상태로 돌려놓습니다.
감사합니다.

LIST
저작자표시

'html5+CSS3' 카테고리의 다른 글

HTML 시맨틱 태그,(Semantic Tag), 의미론적 태그  (0) 2024.02.10
HTML 레이블 태그(<label>), 라디오 버튼(radio), 체크박스(checkbox) 활용  (0) 2024.02.09
HTML <div>, <span> 태그 & class and id  (0) 2024.02.04
HTML 이미지<img>, 비디오<video>, 오디오 태그<audio>  (0) 2024.02.03
HTML 링크 태그, 리스트 태그  (0) 2024.02.01
'html5+CSS3' Related Articles more