jQuery 모바일로 구현한 문의 양식 폼
페이지 정보
작성자 서방님 댓글 0건 조회 95회 작성일 15-07-16 17:38본문
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<!-- CDN 방식으로 외부 라이브러리의 호출 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>롯데홈쇼핑</h1>
</div>
<div data-rold="content">
<h2>문의하기</h2>
<form action="#">
<div data-role="fieldcontain">
<label for="name">이름</label>
<input type="text" id="name"/>
</div>
<div data-role="fieldcontain">
<label for="gender">성별</label>
<select name="gender" id="gender" data-role="slider">
<option value="남자">남자</option>
<option value="여자">여자</option>
</select>
</div>
<div data-role="fieldcontain">
<!-- data-type="horizontal" : 배치방향 가로 "vertical" : 배치방향 세로 -->
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>주제별문의</legend>
<input type="checkbox" name="type1" id="type1"/>
<label for="type1">상품</label>
<input type="checkbox" name="type2" id="type2"/>
<label for="type2">배송관련</label>
<input type="checkbox" name="type3" id="type3"/>
<label for="type3">환불</label>
<input type="checkbox" name="type4" id="type4"/>
<label for="type4">기타</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>직업</legend>
<input type="radio" name="job" id="job1"/>
<label for="job1">회사원</label>
<input type="radio" name="job" id="job2"/>
<label for="job2">공무원</label>
<input type="radio" name="job" id="job3"/>
<label for="job3">전문직</label>
<input type="radio" name="job" id="job4"/>
<label for="job4">개발자</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="textarea">문의 내용 </label>
<textarea rows="8" cols="50" id="textarea"></textarea>
</div>
<div style="text-align:center">
<!-- data-inline: true = 인라인 요소로 만들어줌 -->
<input type="reset" value="취소" data-icon="delete" data-inline="true"/>
<input type="submit" value="전송" data-icon="arrow-r" data-inline="true" />
</div>
</form>
</div>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
