2.1 <input> 요소
폼은 웹페이지의 중요한 구성 요소로, 사용자에게 데이터를 입력하고 전송할 수 있는 기능을 제공해. 폼의 주요 요소는 <input>, <textarea>, <button>야. 이 요소들은 유저들이 텍스트를 입력하고, 옵션을 선택하고, 파일을 업로드하고 다른 작업들을 수행할 수 있게 해줘.
<input> 요소는 가장 자주 사용되는 폼 요소 중 하나야. 다양한 유형의 데이터 입력을 지원하고 텍스트 입력, 파일 선택, 날짜 지정 등 다양한 용도로 사용할 수 있어.
일반적인 구문:
<input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
<input> 속성
type: 입력 유형을 결정해.name: 서버에서 데이터를 식별하기 위해 사용하는 폼 요소의 이름이야.id: 요소의 고유 식별자야.value: 요소의 초기 값이야.placeholder: 데이터를 입력하기 전 요소 안에 표시되는 텍스트야.required: 요소를 필수로 채워야 함을 나타내.
<input> 예제
input-text는 한 줄의 텍스트를 입력할 수 있게 해줘.
<input type="text" name="username" id="username" placeholder="사용자 이름 입력" required>
2.2 <textarea> 요소
<textarea> 요소는 여러 줄의 텍스트 입력에 사용돼. <input type="text">와 달리 여러 줄의 텍스트를 입력할 수 있으며 크기를 조정할 수 있어.
일반적인 구문:
<textarea name="name"
id="id"
rows="rows" cols="cols"
placeholder="placeholder" required>
</textarea>
<textarea> 속성
name: 서버에서 데이터를 식별하기 위해 사용하는 폼 요소의 이름이야.id: 요소의 고유 식별자야.rows: 텍스트의 줄 수야.cols: 한 줄에 들어가는 문자 수야.placeholder: 데이터를 입력하기 전 요소 안에 표시되는 텍스트야.required: 요소를 필수로 채워야 함을 나타내.
사용 예제:
<label for="comments">댓글:</label>
<textarea name="comments"
id="comments"
rows="5"
cols="40"
placeholder="여기에 댓글 입력..."
required>
</textarea>
<textarea> 스타일링
<textarea> 요소는 CSS로 스타일링하여 외관과 사용자 경험을 개선할 수 있어.
스타일링 예제:
textarea {
width: 75%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical; /* 세로로만 크기를 조정 가능 */
}
<label for="comments">댓글:</label>
<textarea name="comments"
id="comments"
rows="5" placeholder="여기에 댓글 입력..." required>
</textarea>
2.3 <button> 요소
<button> 요소는 폼에서 버튼을 생성할 때 사용돼. <input type="button">과 달리, <button> 요소는 텍스트, 이미지와 같은 다양한 HTML 요소를 포함할 수 있어서 더 유연해.
일반적인 구문:
<button type="type" name="name" id="id" value="value">버튼 텍스트</button>
사용 예제:
<button type="submit">제출</button>
<button type="reset">리셋</button>
<button type="button" onclick="alert('버튼 눌림!')">눌러줘</button>
<button> 속성
-
type:버튼의 동작을 결정해. 가능한 값들은 다음과 같아:submit: 폼을 제출해 (기본값)reset: 폼을 리셋해button: 기본 동작이 없는 임의의 버튼이야
name: 서버에서 데이터를 식별하기 위해 사용하는 폼 요소의 이름이야.id: 요소의 고유 식별자야.value: 서버로 폼을 제출할 때 전송되는 값이야.
<button> 내부에 HTML 포함하기
<button> 요소는 다양한 HTML 요소를 포함할 수 있어서 더 복잡한 버튼을 만들 수 있어.
HTML을 포함한 버튼 예제:
<button type="type" name="name" id="id" value="value">
📨제출
</button>
<button type="type" name="name" id="id" value="value">
<img src="submit_icon.png" alt="제출">
제출
</button>
<button> 스타일링
<button> 요소는 CSS로 스타일링해서 외관과 사용자 경험을 개선할 수 있어.
스타일링 예제:
button {
background-color: #4CAF50; /* 초록색 배경 */
color: white; /* 흰색 텍스트 */
padding: 15px 20px; /* 내부 여백 */
border: none; /* 경계 없음 */
border-radius: 4px; /* 모서리 둥글게 */
cursor: pointer; /* 커서 포인터 */
}
button:hover {
background-color: #45a049; /* 호버 시 어두운 초록색 배경 */
}
<button type="submit">제출</button>
GO TO FULL VERSION