반응형
drop down이라고 불리는 이 기능은 여러 가지 선택지 중 하나를 선택하게 하는 dropdown List 제한된 공강에서 여러개를 선택하게 하는 기능으로 select와 option으로 이루어져 있습니다.
<html>
<body>
<select name = number>
<option value="1">일</option>
<option value="2">이</option>
<option value="3">삼</option>
</select>
</body>
</html>위에 코드를 입력하면 밑에처럼 보입니다.
선택하면 밑으로 펼쳐지죠.
사용자에게는 일,이,삼 으로 보이지만 실제로 넘어가는 데이터와 다루는 데이터는 1,2,3 인것이죠 (value가 넘어갑니다)
multiple 속성
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/color.php">
<h2>숫자</h2>
<select name = number>
<option value="1">일</option>
<option value="2">이</option>
<option value="3">삼</option>
</select>
<h2>색깔</h2>
<select name="color" multiple>
<option value="black">검정</option>
<option value="orenge">주황</option>
<option value="white">흰</option>
</select>
<br><br><br>
<input type="submit">
</form>
</body>
</html><select name = "color" multiple>
multiple 속성이 붙으면 사용자가
ctrl키를 누르고 선택 항목에서 다중 선택을 할 수 있습니다.
생활코딩님에게 배운 바로는
백엔드 개발자가 여기 url로 정보 보낼 수 있게 해 주세요~라고 하면
<form action="(url)">
<input type="submit">
</form>
으로 <form>태그 안에 있는 사용자가 기입한 정보를 해당 서버로 보낼 수 있게 된다고 합니다.
정보를 기입하고 submit버튼을 누르면 지정한 url로 사용자가 선택한 데이터가 넘어가게 됩니다.
각 태그의 name속성 이후 사용자가 선택한 정보가 url로 표시됩니다..
728x90
반응형
'Front End > HTML + CSS + JavaScript' 카테고리의 다른 글
| HTML submit, butten tag 버튼, , reset 버튼 (0) | 2023.06.30 |
|---|---|
| HTML input type 라디오 버튼 체크박스, radio check box (1) | 2023.06.16 |
| HTML form input 텍스트 필드 회원가입 예제 입력양식 (0) | 2023.06.15 |
| HTML table 테이블 태그로 표만들기, table 병합하기 colspan rowspan (0) | 2023.06.14 |
| HTML 단락 줄바꿈<br>, 타이틀<title>, 제목 태그<h1~6> (0) | 2023.06.13 |
