HTML 폼 요소를 사용하면 웹 사이트 방문자로부터 정보를 수집하고 서버로 전송할 수 있습니다. 폼 요소는 input, select, textarea 등 다양한 요소를 포함하며, 사용자가 입력한 데이터를 클라이언트 측에서 먼저 검증하거나 서버로 전송하여 추가적인 처리를 수행할 수 있습니다.
1. input 요소
폼에서 가장 많이 사용되는 요소 중 하나입니다. 사용자로부터 텍스트, 비밀번호, 날짜, 시간, 이메일 등 다양한 종류의 입력을 받을 수 있습니다.
예시:
<form>
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password"><br><br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="제출">
</form>위 코드는 웹 브라우저에서 다음과 같이 표시됩니다.
2. select 요소
사용자가 목록에서 항목을 선택할 수 있도록 합니다. 선택한 값은 폼을 제출할 때 서버로 전송됩니다.
예시:
<label for="cars">차종:</label>
<select id="cars" name="cars">
<option value="volvo">볼보</option>
<option value="saab">사브</option>
<option value="mercedes">메르세데스</option>
<option value="audi">아우디</option>
</select>위 코드는 웹 브라우저에서 다음과 같이 표시됩니다.
3. textarea 요소
사용자로부터 여러 줄의 텍스트를 입력할 수 있도록 합니다.
예시:
<label for="message">메시지:</label>
<textarea id="message" name="message" rows="4" cols="40"></textarea><br><br>위 코드는 웹 브라우저에서 다음과 같이 표시됩니다.
4. radio 요소
여러 개의 선택지 중 하나를 선택할 수 있도록 합니다.
예시:
<label for="male">남자</label>
<input type="radio" id="male" name="gender" value="male"><br>
<label for="female">여자</label>
<input type="radio" id="female" name="gender" value="female"><br>위 코드는 웹 브라우저에서 다음과 같이 표시됩니다.
5. checkbox 요소
여러 개의 선택지 중 여러 개를 선택할 수 있도록 합니다.
예시:
<label for="vehicle1">바이크</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="bike"><br>
<label for="vehicle2">자동차</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="car"><br>위 코드는 웹 브라우저에서 다음과 같이 표시됩니다.
반응형
댓글