Form 요소
< form action="처리할페이지주소" method="get|post" >< /form >
- form 요소를 통해 웹페이지는 사용자로부터 입력을 받을 수 있음
- 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소 사용
- action 속성 : 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시. 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)
- method 속성 : 입력받은 데이터를 서버에 전달할 방식 명시
- 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달
method 속성
method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식
- GET 방식
GET 방식은 주소에 데이터를 추가하여 전달하는 방식. 데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적. 따라서 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용. - POST 방식
POST 방식은 데이터를 별도로 첨부하여 전달하는 방식. 데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한 없음. 따라서 보안성 및 활용성이 GET 방식보다 좋음.
input 요소
1. 텍스트 입력(text)
- < input >태그의 type 속성값 "text".
- 사용자로부터 한 줄의 텍스트를 입력받을 수 있음
<h1>텍스트 입력</h1>
<form action="/examples/media/request.php">
검색할 내용을 입력하세요 :
<input type="text" name="search">
</form>
2. 비밀번호 입력(password)
- < input >태그의 type 속성값 "password".
- 사용자로부터 비밀번호를 입력받을 수 있음.
- 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시
<h1>비밀번호 입력</h1>
<form>
사용자 : <br>
<input type="text" name="username"><br>
비밀번호 : <br>
<input type="password" name="password">
</form>3. 라디오 버튼(radio) (동그란 체크박스)
- < input >태그의 type 속성값 "radio".
- 사용자로부터 여러 개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있음.
- 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 함.
<body>
<h1>라디오 버튼</h1>
<p>다음 중 가장 재밌고 내용이 알찬 강좌를 하나만 골라주세요.</p>
<form>
<input type="radio" name="lecture" value="html" checked> HTML <br>
<input type="radio" name="lecture" value="css"> CSS <br>
<input type="radio" name="lecture" value="java"> JAVA <br>
<input type="radio" name="lecture" value="cpp"> C++
</form>
</body>4. 체크박스(checkbox) (네모 중복 체크박스)
- < input >태그의 type 속성값 "checkbox".
- 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있음.
- 중복 가능하기 때문에 여러 개의 옵션을 한 번에 입력받을 수 있고, 마찬가지로 모든 input 요소의 name 속성이 같아야 함.
<body>
<h1>체크박스</h1>
<p>다음 중 재밌고 내용이 알찬 강좌를 모두 골라주세요.</p>
<form>
<input type="checkbox" name="lecture" value="html" checked> HTML <br>
<input type="checkbox" name="lecture" value="css"> CSS <br>
<input type="checkbox" name="lecture" value="java"> JAVA <br>
<input type="checkbox" name="lecture" value="cpp" disabled> C++
</form>
</body>여기서 name 속성은 뭐지? 어디다 쓰는거임?
5. 파일 선택(file)
- < input >태그의 type 속성값 "file". 사용자로부터 파일을 전송받을 수 있음.
- accept 속성을 이용하여 입력받을 수 있는 파일의 확장자 및 종류를 명시
<h1>파일 선택 박스</h1>
<p>여러분이 가장 행복했던 날의 사진을 선택해 주세요.</p>
<form>
<input type="file" name="upload_file" accept="image/*">
</form>
6. 선택 입력(select)
- select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그중에서 단 하나의 옵션만을 입력받을 수 있음
- option 요소는 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시
- selected 속성으로 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션 지정
<h1>선택 입력</h1>
<p>다음 중 여러분이 가장 좋아하는 과일을 골라주세요.</p>
<form>
<select name="fruit">
<option value="apple"> 사과
<option value="orange" selected> 귤
<option value="strawberry"> 딸기
<option value="peach"> 복숭아
</select>
</form>7. 문장 입력(textarea)
- textarea 요소는 사용자로부터 여러 줄의 텍스트를 입력받을 수 있음
- rows 속성과 cols 속성을 이용하여 textarea 요소의 크기를 자유롭게 지정
<h1>문장 입력</h1>
<p>여러분의 부모님께 하고 싶은 말을 적어보세요.</p>
<form>
<textarea name="message" rows="5" cols="30"> 여기에 적으세요.</textarea>
</form>8. 버튼 입력(button)
- 사용자가 누를 수 있는 버튼
- < button > 태그의 type 속성값 "button"
- < button > 태그의 onclick 속성값 "alert("버튼 창에 쓰여질 내용")
<h1>버튼 입력</h1>
<button type="button" onclick="alert('버튼을 클릭하셨군요!')">버튼을 눌러주세요.</button>
9. 전송 버튼(submit)
- < input >태그의 type 속성값을 "submit"
- 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼 생성
- 폼 핸들러(form-handler) : 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지. 폼 핸들러의 주소는 form 요소의 action 속성을 이용하여 명시
<h1>전송 버튼</h1>
<form action="/examples/media/request.php">
어릴 때 자신의 별명을 적어주세요 : <br>
<input type="text" name="nickname" value="별명"><br><br>
<input type="submit" value="전송">
</form>
<p>별명을 적으신 후에 전송 버튼을 눌러보세요!</p>
10. 필드셋(fieldset)
- fieldset 요소는 form 요소와 관련된 데이터들을 하나로 묶어주는 역할
- legend 요소는 fieldset 요소 안에서만 사용 가능, fieldset 요소의 제목을 나타냄
<h1>필드셋</h1>
<form action="/examples/media/request.php">
<fieldset>
<legend>입력 양식</legend>
이름 : <br>
<input type="text" name="username"><br>
이메일 : <br>
<input type="text" name="email"><br><br>
<input type="submit" value="전송">
</fieldset>
</form>
개발자로서의 삶은 https://velog.io/@maxminos 에서 기록하고 있습니다 😀