728x90
이번 포스팅에서는 여러 입력 요소에 대한 설명입니다.
여러 입력요소로 회원가입 폼을 한번 만들어 보겠습니다.
이중에서 포스팅하지 않은 요소는 날짜를 입력 할 수 있는 select 요소, radio type, check box , file 정도입니다.
바로 코드를 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>여러가지 입력요소</title>
</head>
<body>
<h1>여러가지 입력요소들</h1>
<form action="/join.jsp" method="post" enctype="multipart/form-data">
<!-- 파일을 서버로 전송하기 위한 조건은 enctype을 다음과 같이 기재 -->
<!-- enctype의 default값은 application/x-www-form-urlencoded 로 기재x -->
<input type="hidden" name="no" value="1">
<!-- input type=hidden 은 name과 value가 항상 같이 있어야한다. -->
<!--
hidden : 유저에게 보여지지는 않지만 함께 넘길
파라미터가 있을 때 사용
name 과 value 를 기재
-->
<fieldset>
<legend>회원가입 폼</legend>
<h2>아이디</h2>
<input name="id" autocomplete="off" type="text" placeholder="아이디 입력">
<!--
autocomplete 같은 id값에 입력된 값을 기록들을 보여주거나 off하는 기능
default 값은 on으로 설정, 브라우저마다 다르다.
-->
<h2>비밀번호</h2>
<input name="pwd" type="password" placeholder="비밀번호 입력">
<!-- type pwd 같은 경우에는 autocomplete 설정이 없음 -->
<h2>성별 선택</h2>
<label><input name="sex" type="radio" checked value="male">남</label>
<input id="female" name="sex" type="radio" value="female"><label for="female">여</label>
<!--
input type속성 종류
1) radio : 중복선택이 불가능 하기 위해 사용
- label 요소로 제목을 써야함
- name 속성이 반드시 필요함(name 으로 묶어줌)
- value 값도 개발자가 입력해 놓아야한다.
- checked 속성이 있을 경우 기본으로 선택되어 있음
radio type
1) if 2개의 radio button 중 하나만 선택 하고싶다
- name 속성의 값을 같게 만들어주면 2개중 한개가 선택가능
2) value 속성을 통하여 radio 가 가지고있는 값(value)를 쿼리스트링을 통하여
서버로 전송이 가능하다.
3) checked 속성을 통하여 default check 가능
-->
<h2>취미 선택</h2>
<label><input name="hobby" type="checkbox" value="독서">독서</label>
<label><input name="hobby" type="checkbox" value="음악감상">음악감상</label>
<input id= "hb" name="hobby" type="checkbox" value="운동">운동
<label for="hb"></label>
<!-- 2) checkbox : 중복선택이 가능 -->
<h2>태어난 해 선택</h2>
<label><select name="year">
<option value="2018">2018년</option>
<option value="2017">2017년</option>
<option value="2016">2016년</option>
<option value="2015" selected>2015년</option>
<!-- seleected 속성을 기재하면 default로 된다. -->
<option value="2014">2014년</option>
<option value="2013">2013년</option>
</select></label>
<!--
select 요소 : 여러 옵션중에 하나를 선택하는 요소
option 요소 : select 요소의 자식으로 하나하나의 옵션을 의미함
selected 속성으로 기본값 선택
-->
<p>프로필 입력</p>
<label>
<textarea name="profile" cols="50" rows="5" placeholder="소개를 입력하세요"></textarea>
</label>
<!-- textarea 요소: 여러줄 입력하는 요소 -->
<h2>프로필 사진 등록</h2>
<input name="file" type="file" multiple>
<!--
3) file : 파일 업로드용
(파일 업로드를하려면 enctype 속성의 값을 enctype="multipart/form-data"로 기재)
- multiple 속성으로 여러개의 파일 선택가능
-->
<p>
<button>회원가입</button>
</p>
</fieldset>
</form>
<hr/>
<input type="date">
<!--
HTML5에 추가된 type들은 브라우저마다 다르게 표현되거나
익스플로러에서는 제대로 작동되지 않는 경우가 많아서
실무에서 사용하지는 않고, 여러 라이브러리를 이용함 (jquery ui, toast ui 등등)
-->
</body>
</html>
주석에 충분한 설명이 기재되어있습니다.
반응형
'Front-end > HTML' 카테고리의 다른 글
| 12(Final). 요소의 분류 (인라인레벨, 블록레벨) (0) | 2018.08.08 |
|---|---|
| 10. 복습 예제 (0) | 2018.08.01 |
| 9. 폼의기능(GET, POST 방식) (0) | 2018.07.31 |
| 8. 테이블(table) 예제 (0) | 2018.07.31 |
| 8. 테이블(Table) 요소 (0) | 2018.07.26 |