프런트엔드-HTML

HTML 구조 설계

강사: 최퍼블리셔 · 작성자: 이종춘 · 작성일: 2026-04-23 21:14:13 · 조회수: 12

입력태그 설명
목록으로
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 300vh;
}
</style>
</head>
<body>

<!-- *form
=>input 태그의 부모 태그로 사용자가 입력한 내용을 요청하는 역할을 함
=>action: 요청하기 위한 경로
=>method: 1.get: url에 노출되는 요청 (검색)
2.post: 보안처리 해야될때 (로그인, 회원가입 등)

*input
=>사용자가 글을 입력할 수 있는 태그
=>placeholder: 미리 보기 글
=>value: input태그의 내용을 작성함 -->


<form method="post">
<input type="text" placeholder="검색해보세요"> <br>
<input type="text" value="검색"> <br>

<input type="checkbox" id="choice_1">
<label for="choice_1">선택 1</label>
<!-- =>특정 인풋과 연결할때 사용 -->

<input type="checkbox" id="choice_2">
<label for="choice_2">선택 2</label>

<input type="checkbox" id="choice_3">
<label for="choice_3">선택 3</label><br><br><br>


<h4>성별 선택</h4>
<input type="radio" id="tab_1" name="tab">
<label for="tab_1">남성</label>

<input type="radio" id="tab_2" name="tab">
<label for="tab_2">여성</label> <br><br><br>

<input type="password" placeholder="패스워드를 입력하세요">

<input type="color"><br>
<!-- =>컬러 픽업창이 뜸 -->

<input type="date"><br>
<!-- =>날짜 선택하는 달력이 뜸 -->

<input type="time">
<!-- =>시간 선택하는 달력이 뜸 -->

<input type="range"><br>

<input type="file"><br>

<input type="submit" value="로그인">
<button>제출!</button>
<!-- =>유저가 작성한 내용을 제출할 때 사용 -->

<input type="button" value="버튼">
<!-- =>이벤트로 사용하는 버튼이며 내용을 제출하지 않음 -->
</form>

</body>
</html>
#입력태그

첨부 파일

0개
첨부된 파일이 없습니다.

댓글 / 답글

0개
댓글을 작성하려면 로그인하세요.
아직 댓글이 없습니다.