'html form'에 해당되는 글 2건

  1. 2022.05.19 HTML FORM 테그
  2. 2021.12.27 Form기본태그

HTML FORM 테그

개발 및 관리/HTML, CSS, Javascript, DOM 2022. 5. 19. 21:39 posted by HighLighter
반응형

****************
FORM 태그
****************

Form기본태그.txt
0.00MB


Form태그란?
 - 사용자로부터 어떠한 정보를 받고 싶을 때 사용
 - 숙박부, 주문양식, 설문조사, 피드백 등을 위해 활용될 수 있음

Form tag의 양식
 <form> : form의 시작을 알리는 tag
 <input> : 다양한 방법 중 하나로 정보를 질의
 </form> : form의 끝을 알리는 tag

Form 기본태그 예제

<!DOCTYPE html>
<html>
<body>

<h2>form 태그 연습</h2>

<form action="frame.html">
당신의 이름은 무엇입니까?
<input name="firstname" type="text">
<br><br>
<input type="submit">
</form>

</body>
</html>



반응형

'개발 및 관리 > HTML, CSS, Javascript, DOM' 카테고리의 다른 글

exceeding the 65535 bytes limit  (0) 2022.07.04
CSS 기본 내용  (0) 2022.05.19
HTML TABLE, IFRAME  (0) 2022.05.19
HTML 기본 테그  (0) 2022.05.19
그리드 레이아웃  (0) 2022.04.02
,

Form기본태그

개발 및 관리/HTML, CSS, Javascript, DOM 2021. 12. 27. 02:54 posted by HighLighter
반응형

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
,
<< prev 1 next >>

티스토리툴바