기록

출처는 tcpschool.com 입니다.

코딩독학 ~~

오늘은 HTML form 요소 2편 ~~~~~

오늘은 너무 졸리드아아아아아앙

세상 만사가 귀찮다아아아아

그래도쬐끔만 해바야지...................

텍스트 입력 받기 : <input> 태그 text 속성

<form action="/examples/media/request.php">

    검색할 내용을 입력하세요 :

    <input type="text" name="search">

</form>

비밀번호 입력 받기 : <input> 태그 password 속성

<h1 style="color:red">비밀번호 입력</h1>

<form style="color:magenta">

사용자 : <br>

<input type="text" name="username"><br>

비밀번호 : <br>

<input type="password" name="password">

</form>

>> 결과

<h1>라디오 버튼</h1>

<p>감자튀김을 좋아하시나요?</p>

<form>

<input type="radio" name="potato" value="yes" checked> 예 <br>

<input type="radio" name="potato" value="no"> 아니오 <br>

</form>

>> 결과

체크박스 : <input> 태그 checkbox 속성 (여러개 옵션 선택)

<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>

>> 결과

파일 선택 : <input> 태그 file 속성 (파일 전송받기)

<h1>파일 선택 박스</h1>

<p>여러분이 가장 행복했던 날의 사진을 선택해 주세요.</p>

<form>

<input type="file" name="upload_file" accept="image/*">

</form>

>> 결과

출처 : TCP스쿨

코딩독학 !

출처는 tcpschool.com 입니다.

오늘은 HTML 입력 양식의  Form 요소

Form 요소

웹페이지에서는 form 요소를 이용하여 사용자로부터 입력을 받을 수 있음.

사용자가 입력한 데이터를 서버로 보낼 때도 form 요소 사용.

action 속성 : 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시함.

폼 핸들러(form-handler) : 전달받은 데이터를 처리하는 스크립트 파일

method 속성 : 입력받은 데이터를 서버에 전달할 방식을 명시함.

사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달됨.

method 속성을 통해 명시할 수 있는 form 요소의 전달 방식 : GET 방식 / POST 방식

GET 방식 : 주소에 데이터(data)를 추가하여 전달함

데이터가 주소 입력창에 그대로 나타남 / 전송할 수 있는 데이터의 크기가 제한적임.

>> 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용함.

POST 방식 : 데이터(data)를 별도로 첨부하여 전달함

데이터가 외부에 드러나지 않음 / 전송할 수 있는 데이터의 크기에 제한이 없음.

>> 보안성 및 활용성이 GET 방식보다 좋음.

input 요소 : input 요소를 사용하여 사용자로부터 입력을 받을 수 있음.

1. 텍스트 입력 (text)

2. 비밀번호 입력 (password)

3. 라디오 버튼 (radio)

4. 체크박스 (checkbox)

5. 파일 선택 (file)

6. 선택 입력 (select)

7. 문장 입력 (textarea)

8. 버튼 입력 (button)

9. 전송 버튼 (submit)

10. 필드셋 (fieldset)

실습)

<h1>텍스트 입력</h1>

<form action="/examples/media/request.php">

검색할 내용을 입력하세요 :

<input type="text" name="search">

</form>

>> 결과

출처 : TCP스쿨