2018.12.04 로그인폼,텍스트 입력창,버튼
2018. 12. 4. 16:43ㆍHTML5&CSS
#1 로그인 폼만들기(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>form</title>
</head>
<body>
<form action="Index.html">
ID : <input type="text" name="id"/>
PW : <input type="password" name="pw"/>
EMAIL : <input type="email" name="email"/>
<input type="submit" value="전송"/>
</form>
</body>
</html>
#2 로그인 폼만들기(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>form</title>
</head>
<body>
<!-- method="post"→ 16bit,주소를 숨겨표기 / method="get"→ 256byte,주소에 입력값을 그대로 표기 -->
<form action="Index.html" method="post">
ID : <input type="text" name="id"/>
PW : <input type="password" name="pw"/>
EMAIL : <input type="email" name="email"/>
<input type="submit" value="전송"/>
</form>
</body>
<a href="https://search.naver.com/search.naver?sm=top_hty&fbm=1&ie=utf8&query=%EB%85%B8%EB%9E%98">
노래
</a>
<a href="https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=%EA%B1%B4%EB%AA%A8&oquery=%EB%85%B8%EB%9E%98&tqi=Ushk7spySDGssv1ZAIhsssssssh-517303">
김건모
</a>
</html>
#3 텍스트 입력창
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 텍스트 입력창</title>
</head>
<body>
<h3>자기소개서 작성</h3>
<hr/>
<form>
이름 : <input type="text"/><br/>
암호 : <input type="password" maxlength="4"/><br/>
자소서 : <textarea cols="20" row="5">
이곳에 자기 소개서 작성
</textarea>
</form>
</body>
</html>
#4 자동 완성 폼만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>자동완성 폼만들기</title>
</head>
<body>
나라 : <input type="text" list="countries"/>
<datalist id="countries">
<option>가나</option>
<option>스위스</option>
<option>브라질</option>
</datalist>
과일 : <select name="fruits">
<option>바나나</option>
<option>사과</option>
<option>딸기</option>
</select>
</body>
</html>
#5 버튼 만들기, console.log이용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>버튼 만들기</title>
</head>
<body>
<input type="button" value="클릭" onclick="send1()"/><br/>
<button onclick="send2()">버튼</button>
<script>
function send1(){
alert("input버튼")
console.log("send1 호출됨")
}
function send2(){
alert("버튼")
console.log("send2 호출됨")
}
</script>
</body>
</html>
'HTML5&CSS' 카테고리의 다른 글
| 2018.12.05 메뉴디자인하기 (0) | 2018.12.05 |
|---|---|
| 2018.12.05 달력&체크박스&라디오&외부 이미지 (0) | 2018.12.05 |
| .vscode 설정후 Ctrl + Shift + B 실행하기 (0) | 2018.12.04 |
| 2018.12.03 화면배치(overflow,margin사용) (0) | 2018.12.03 |
| 2018.11.30 시멘틱구조 , 화면배치 , 로그인폼 (0) | 2018.11.30 |