HTML5에서 Form 기본 태그를 아래와 같이 정리해보았습니다.
기본적인 태그들이라서 이해가 쉽습니다.
*********************
Form기본태그
*********************
<input type="타입">
<html>
<body>
<h2>form 태그 연습</h2>
<form>
당신이 좋아하는 과일은 무엇입니까? <br>
<input name="peach" type="button"> 복숭아 <br>
<input name="apple" type="button"> 사과
<br><br>
<input type="submit">
</form>
</body>
</html>
<html>
<body>
<h2>form 태그 연습</h2>
<form>
당신이 좋아하는 과일은 무엇입니까? <br>
<input name="peach" type="checkbox"> 복숭아 <br>
<input name="apple" type="checkbox"> 사과
<br><br>
<input type="submit">
</form>
</body>
</html>
<html>
<body>
<h2>form 태그 연습</h2>
<form>
당신이 좋아하는 과일은 무엇입니까? <br>
<input name="peach" type="radio"> 복숭아 <br>
<input name="apple" type="radio"> 사과
<br><br>
<input type="submit">
</form>
</body>
</html>
<html>
<body>
<h2>form 태그 연습</h2>
<form>
아이디와 비밀번호를 입력하시오 <br>
<input name="id" type="text"> <br>
<input name="pw" type="password">
<br><br>
<input type="submit">
</form>
</body>
</html>
<html>
<body>
<h2>form 태그 연습</h2>
<form>
당신 좋아하는 과일은 무엇입니까? <br>
<select name="fruits"
<option value="peach">복숭아</option>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="lemon">레몬</option>
</select>
<input type="submit">
</form> </body> </html>
<html>
<body>
<h2>form 태그 연습</h2>
<form>
메세지를 납겨주세요. <br>
<textarea name="message" rows="10" cols="50">
Please leave a message.
</textarea>
<input type="submit">
</form> </body> </html>
<html>
<body>
<h2>form 태그 연습</h2>
<button type="button" onclick="alert('클릭성공!')">클릭해주세요!!</button>
</body>
</html>
<html>
<body>
<h2>form 태그 연습</h2>
색깔을 선택하세요.
<input type="color">
<input type="submit">
</body>
</html>
<html>
<body>
<h2>form 태그 연습</h2>
색깔을 선택하세요.
<input type="color">
<input type="submit">
</body>
</html>
<html>
<body>
<h2>form 태그 연습</h2>
날짜를 선택하세요.
<input type="date">
<input type="submit">
</body>
</html>
<html>
<body>
<h2>form 태그 연습</h2>
파일을 선택하세요.
<input type="file">
<input type="submit">
</body>
</html>
<html>
<body>
<h2>form 태그 연습</h2>
숫자를 선택하세요.
<input type="number" min="1" max="5">
<input type="submit">
</body>
</html>
******************
설문조사 코드
******************
<!DOCTYPE html>
<html> <body>
<h2>설문조사</h2>
<form>
이름: <input type="text"><br>
비밀번호: <input type="password"><br>
학년을 선택하세요<br>
<div><input type="radio">1학년<br>
<input type="radio"> 2학년<br>
<input type="radio"> 3학년<br>
<input type="radio"> 4학년<br></div><br><br>
담당자에게 하고 싶은 말을 쓰세요<br>
<textarea></textarea>
<input type="submit" 제출>
<input type="reset" 초기화>
</form></body></html>
'개발 및 관리 > HTML, CSS, Javascript, DOM' 카테고리의 다른 글
| (youtube) CSS, HTML 강좌 - 잘 알려주는 강좌 (0) | 2022.01.05 |
|---|---|
| 멀티미디어 태그 활용 (0) | 2021.12.27 |
| TABLE, IFRAME, LAYER 만들기 (0) | 2021.12.25 |
| HTML 기본태그 (0) | 2021.12.24 |
| HTML, CSS, Javascript 무료 온라인 강의 (0) | 2021.12.23 |
