HTML - form
form
: 사용자가 입력한 정보를 서버로 전송할 때 사용하는 글자를 입력하거나 무언가를 선택하는 것들
ex) 로그인, 회원가입에 주로 사용
받은 정보를 어디로 보낼 것인가에 대해서는
form태그의 action 속성을 이용!
<form action = "정보를 전송할 주소의 링크"> </form>
서버에서 정보를 받기 위해서는 이름이 필요! - name 속성 이용
각 정보마다 고유한 name 값을 주어야 함
<html>
<body>
<form action="">
<div class="warp">
<div class="id-area">
<label for="id">아이디 <input type="text" id="id" class="id" name="id"/></label>
</div>
<div class="pw-area">
<label for="pw">비밀번호 <input type="password" id="pw" class="pw" name="pw"/></label>
</div>
<div class="btn-area">
<button type="submit" class="btn" id="btn" class="btn">로그인</button>
</div>
</div>
</form>
</body>
</html>
<form> 태그의 입력 태그 종류
1. <input type="text"> 👉 input 박스에 text 형태로 입력됨
2. <input type="password"> 👉 input 박스에 문자가 보이지 않는 password 형태로 입력됨
input 박스 안에 기본값 설정 👉 value, placeholder 속성 이용!
<input type="text" value="Hi">
박스 안에 새로운 값을 입력해도 기본 값 존재
<input type="text" placeholder="Hi">
박스 안에 새로운 값을 입력하면 기본 값이 사라짐
3. <textarea> </textarea> 👉 여러 줄을 입력할 수 있는 박스 형태
textarea의 가로, 세로 길이 지정 👉 각각 cols(colums의 약자), rows 속성을 이용
<textarea cols="30" rows="2"></textarea>
textarea 박스 내에 기본 값 설정 👉 태그 사이에 문구 넣어주기
<textarea cols="15" rows="1"> 안녕하세요 :) </textarea>
4. Dropdown list 👉 조건을 선택할 수 있는 태그
<body>
<form action="http://localhost/color.php">
<h1>색상</h1>
<select name="color">
<option value="red">빨간색</option>
<option value="black">검은색</option>
<option value="yellow">노란색</option>
</select>
<input type="submit">
</form>
</body>
5. radio, checkbox
- radio : 같은 그룹에 있는 것 중 하나만 선택이 됨
<input type="radio">
<input type="radio">
radio 버튼 👉 name을 같게 주면 중복 체크를 막을 수 있음!
<input type="radio" name="radio">
<input type="radio" name="radio">
<input type="radio" name="radio">
<input type="radio" name="radio">
- checkbox : 같은 그룹에 있는 것이 여러 개가 선택되게 하는 컨트롤
(같은 name을 가진 여러 개의 컨트롤들을 다중으로 선택할 수 있음)
<input type="checkbox" name="check">
<input type="checkbox" name="check">
<input type="checkbox" name="check">
<input type="checkbox" name="check">
'개발' 카테고리의 다른 글
| mac terminal로 EC2 서버 접속하기 (0) | 2023.06.26 |
|---|---|
| 백엔드 개발 로드맵 이미지 (0) | 2023.06.07 |
| mac terminal에서 ./gradlew 명령어 Permission denied (0) | 2023.05.03 |
