이번에는 여러분이 잘 알고 있는 텍스트를 입력받는 기능, 선택기능을 공부해볼 것입니다.
일단 기본 태그들은 form과 input입니다.
일단 예제로 살펴봅시다.
<html>
<body>
<form action="http://localhost/login.php>
<p>아이디: <input type="text" name="id" value="id></p>
<p>비밀번호:<input type=""password" name="pwd" value="nothing></p>
<p>주소: <textarea cols="40" rows="'8">주소</textarea></p>
<h1>색상선택</h1>
<p><select name="color">
<option value="red">붉은색</option>
<option value="blue">파랑색</option>
<option value="black">검정색</option>
</select>
</p>
<h1>색상다중선택</h1>
<h2>ctrl을 누르고 선택<h2>
<p><select name="color2" multiple>
<option value="red">붉은색</option>
<option value="blue">파랑색</option>
<option value="black">검정색</option>
</select>
</p>
<h1>옷의 색상</h1>
<p>
<input type="radio" name="color" value="red">빨강색
<input type="radio" name="color" value="blue" checked>파랑색
<input type="radio" name="color" value="black">검은색
</p>
<h1>사이즈</h1>
<p>
<input type="checkbox" name="size" value="95">95
<input type="checkbox" name="size" value="100">100
<input type="checkbox" name="size" value="105">105
</p>
<p><input type="submit"</p>
</form>
</body>
</html>
아직 form에 대한 강의는 안 끝났습니다. 다음시간에 form에 대해 조금 더 알아보는 시간이 있겠습니다.
일단 위의 것을 해석해 봐야겠죠? 아는 것은 안 하겠습니다.
form action은 이 데이터를 어디로 전송할지를 정하는 것입니다. form태그 안에 있는 모든 선택된 데이터를 localhost/login.php로 전송합니다.
input은 텍스트를 입력받는 상자인데요, type은 글자의 종류(text:일반, password:점글자, submit은 예외(제출))입니다. name은 글자가 무엇인지, value는 들어갔을 때의 기본값입니다.
select태그는 선택 태그인데요, dropdown list로 표시됩니다. name은 이것의 의미, option은 그 선택되는 것중 하나, 그것의 value는 표시되는 것의 의미입니다.
select name 다음에 multiple을 붙인 것은 다중선택기능입니다. 말 그대로 ctrl버튼과 마우스로 버튼을 누르면 다중선택이 가능합니다.
input type의 radio는 동그란 것인데요, 이것은 단일선택, 즉 하나만 선택이 가능합니다. name과 value는 같고요, 밑의 checkbox는 다중선택입니다. 네모 박스가 나타나는데요, 네모박스 안에 체크표시가 됩니다. 저는 다중선택을 input multiple보다는 checkbox를 추천합니다.
오늘 강의는 잘 이해가 안 가실수도 있습니다. 그러면 일단 제가 쓴 걸 복사해서 개발도구나 메모장으로 가져가서 저장 후 실행시켜보세요. 그래도 모르겠으면 댓글 남겨 주세요.
감사합니다.
댓글 없음:
댓글 쓰기