form ; 로그인, 회원가입 등등...
2019. 9. 5. 23:22ㆍWEB/HTML
<!DOCTYPE html>
<html lang="ko">
<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="go.php" method="post"> <!-- get(검색필드를 만들 때) | post(회원가입이나 로그인 만들 때) -->
아이디 <input type="text" name="field">
<input type="submit" value="전송"> <!-- 전송버튼은 input이나 button으로 해도 상관없음 -->
</form>
<br>
<hr>
<br>
<form action="#" method="post">
<fieldset> <!-- 각각의 서식을 묶어주는 역할 -->
<legend>fieldset legend</legend> <!-- fieldset 안에 들어있는 내용을 표시 -->
<p>
<label for="name">이름</label> <!-- for 속성 값과 id 속성 값이 같아야 함 -->
<input type="text" id="name" name="name" value=""> <!-- 실제 입력하는 값이 value -->
</p>
<p>
<label for="idname">아이디</label>
<input type="text" id="idname" name="idname" value="">
<input type="button" value="아이디중복확인"> <!-- 자바스크립트로 제어 -->
</p>
<p>
<label for="userpass">비밀번호</label>
<input type="password" id="userpass" name="userpass" value="">
</p>
<p>
<label for="usercome">의견</label>
<textarea name="usrcome" id="usercome" cols="30" rows="10"></textarea> <!-- cols 글자 수, rows 줄 -->
</p>
<p>
<label for="usersel">지역선택</label>
<select name="usersel" id="usersel">
<option value="">서울</option>
<option value="">부산</option>
<option value="">광주</option>
<option value="">대구</option>
<option value="">대전</option>
</select>
</p>
<p>
<span>성별</span>
<label for="male">남자</label>
<input type="radio" id="male" name="choice" value="male">
<label for="female">여자</label>
<input type="radio" id="female" name="choice" value="female">
</p>
<p>
<span>취미는?</span>
<label for="trip">여행</label>
<input type="checkbox" id="trip" name="trip" value="trip">
<label for="read">독서</label>
<input type="checkbox" id="read" name="read" value="read">
<label for="movie">영화감상</label>
<input type="checkbox" id="movie" name="movie" value="movie">
</p>
<p>
<span>취미는?</span>
<label>여행 <input type="checkbox" name="trip" value="trip"></label>
<label>독서 <input type="checkbox" name="read" value="read"></label>
<label>영화감상 <input type="checkbox" name="movie" value="movie"></label>
</p>
</fieldset>
<p> <!-- 보통 버튼의 경우 전송과 취소 버튼이 있기에 블럭요소로 잡아준다 -->
<input type="submit" value="전송"> <!-- 전송버튼은 fieldset 안에 있거나 밖에 있어도 상관없음 -->
<input type="reset" value="취소">
<!-- 버튼안에 아이콘을 넣을 수 있음. -->
<button type="submit">전송</button>
<button type="reset">취소</button>
</p>
</form>
</body>
</html>
※인프런 강좌 보고 작성했습니다.
https://www.inflearn.com/course/html-css-webazit#
퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준 - 인프런
웹표준 기초인 html과 css를 마스터하고 실전 웹페이지를 제작해 봅니다. 그때 그때 '그럴 것같은' 이 아니라 제대로 된 퍼블리싱 개념과 방법을 배워 퍼블리셔가 될 수 있습니다. 입문 웹 개발 웹앱 디자인 html/css 웹 디자인 온라인 강의
www.inflearn.com