안녕하세요, 환영합니다.저는 쿠나르라고 합니다.이것은 학습 사이트 개발 시리즈의 일부분이다.
오늘의 글에서 당신은 html 폼과 입력, 그리고 html의 단추를 이해할 것입니다.그럼 시작합시다.

형식.

무엇이 형식입니까?우리는 모두 양식이 무엇인지 알고 있다. 우리는 사이트에 많은 양식을 기입했다.등기표를 작성했거나 친구의 gmail 계정을 만들었을 수도 있습니다.형식은 어디에나 있다.
그럼 HTML로 폼을 만드는 방법에 대해 이야기해 봅시다.<form></form> 폼 라벨 - 폼을 만드는 데 사용되는 폼 라벨입니다.그러나 이것은 필드를 입력하는 용기나 포장기와 같다.그러나 그것은 매우 중요한 속성이 있으니 너는 알아야 한다.
등록 정보
가치관
묘사
메서드
초대장
이것은 데이터를 사이트에서 'action' 속성에서 지정한 사이트로 전송하는 방법을 지정합니다.
행동
(HTML 파일 또는 서버 경로)
그것은 표를 작성한 후에 사용자를 어디로 바꿀 것인지를 지정합니다

방법치 자세히 살펴보기

가치관
묘사
얻다
이렇게 하면 양식 데이터가 URL에 첨부됩니다(https://site.com?name=modern+(네트워크)
우편으로 배달하다
양식 데이터를 HTTP post 트랜잭션으로 보냅니다.이것은 "가져오기"보다 더 안전한 데이터 전송 방식이다.
우리는 마지막 글에서 action과 method의 예를 볼 것이다. 우리는 그곳에서 구글 검색엔진을 제작할 것이다.흥분했잖아.

태그 입력

<input> 레이블을 입력합니다.이 탭은 자동으로 닫혀서 닫을 필요가 없습니다.탭을 입력하면 폼에 필드를 추가할 수 있습니다.자세히 봅시다.
우리는 입력할 수 있는 많은 속성과 유형을 가지고 있다.우리들은 표에서 그것들을 이해합시다.
헐뜯다
가치관
묘사
타입
텍스트, 이메일, 비밀번호, 라디오, 복선상자, 제출, 범위, 날짜, 색깔, 파일, 리셋 등
사용할 입력 유형을 지정합니다.
이름:
문자예제'name ='first name'
이것은 우리가 데이터를 식별할 수 있도록 입력한 이름을 지정하는 데 쓰인다
자리 표시자
문자예제'placeholder='이름 입력'
요소의 예상 값을 설명하는 간단한 프롬프트를 지정합니다.
가치 01 명
문자예제'value='john''
이것은 입력의 기본값을 지정하는 데 사용됩니다
필수
---
이것은 폼을 제출하기 전에 반드시 기입해야 하는 필드를 지정합니다.
등등, 우리는 탭을 입력하는 속성이 매우 많다.하지만 이것들은 모두 가장 자주 사용하는 것이다.필요한 경우 추가 속성here을 읽을 수 있습니다.
입력의 유형을 자세히 알아보겠습니다.

텍스트

type 속성은 입력 유형을 지정하는 데 사용됩니다.
예.

<form>
    <input type="text" placeholder="type your name" name="name">
</form>

we are not using method and action attributes in above example because we don't have submit button.

출력

Email type is same as text but email text check @ sign also.

비밀 번호

이것도 텍스트와 유사하지만, 이런 유형에서는 텍스트를 볼 수 없고, 글머리 기호를 볼 수 있습니다.

<form>
    <input type="password" placeholder="password" name="password">
</form>

출력

사정거리

이것은 창에 범위 슬라이더를 만드는 데 사용됩니다.

<form>
    <input type="range" name="range" min="0" max="10" step="2" value="4">
</form>

출력
min 최소값을 정의합니다.max 최대값을 정의합니다.step 법정 숫자 사이의 간격을 지정하는 데 사용됩니다.

라디오

이것은 폼에 선택 단추를 만들기 위해서입니다.마치... 와 같다

<form>
    <input type="radio" id="red" name="color" value="red" checked>
    <label for="red">red</label>
    <input type="radio" name="color" id="green" value="green">
    <label for="green">green</label>
    <input type="radio" name="color" id="blue" value="blue">
    <label for="blue">blue</label>
    <input type="radio" name="color" id="yellow" value="yellow">
    <label for="yellow">yellow</label>
</form>

출력

위의 예시에서 추가 표시를 발견할 수 있습니다.

<label></label> 라벨 라벨.입력 필드에 레이블을 추가하는 데 사용됩니다.위의 예에서, 우리는 선택 단추에 라벨을 추가합니다.

id 속성.id 모든 요소에 고유한 ID를 제공합니다.

for 속성.for 속성은 태그 태그에 사용됩니다.이것은 이 탭이 어떤 입력에 사용될지 지정합니다.이 for 속성의 값은 원소의 id 값과 같아야 한다.

확인란

체크 상자는 양식에 체크 상자를 추가하는 데 사용됩니다.마치... 와 같다

<form>
    <input type="checkbox" id="red" name="color" value="red" checked>
    <label for="red">red</label>
    <input type="checkbox" name="color" id="green" value="green">
    <label for="green">green</label>
    <input type="checkbox" name="color" id="blue" value="blue">
    <label for="blue">blue</label>
    <input type="checkbox" name="color" id="yellow" value="yellow">
    <label for="yellow">yellow</label>
</form>

출력

체크 상자와 라디오 상자의 차이는 여러 개의 체크 상자를 선택할 수 있지만, 여러 개의 라디오 단추를 선택할 수 있다는 것이다.
참고: - 라디오 유형 및 확인란 유형에서 모든 입력이 동일합니다name.Samename는 동일한 범주에 속함을 나타냅니다.

일자

이 유형은 양식에 캘린더를 추가하는 데 사용됩니다.

<form>
    <input type="date">
</form>

출력

조금 더 있다

<form>
    <!-- to add color field in the form  -->
    <input type="color">
    <br>
    <br>
    <!-- to add upload file  -->
    <input type="file">
    <br>
    <br>
    <!-- to add a reset button which reset all input data -->
    <input type="reset" value="reset">
    <br>
    <br>
    <!-- to add submit button -->
    <input type="submit" value="submit">
</form>

출력

그래서 이것은 모두 입력과 형식에 관한 것이다.이제 구글 검색 폼을 만들어 폼의 action 속성을 알아보자.

구글 검색

<form method="get" action="https://www.google.com/search?">
    <label for="search">Search</label>
    <input type="text" id="search" name="q" required>
    <input type="submit" value="search">
</form>

출력

우리들은 위의 예를 이해합시다.

우리는 method를 get로 설정하여 폼 데이터를 URL에 추가합니다.

action 속성에서 우리는 링크https://www.google.com/search?를 제시했다.근데 이 링크는 어디서 얻은 거예요?

먼저 구글에 갑니다.일반 도메인 이름 형식.

그리고 뭔가를 검색하세요.예를 들어, 나는 '차' 를 검색했다.

주소 표시줄에서 텍스트를 복사하여 코드에 붙여넣습니다.
나와 같다.이것은 매우 긴 주소다.

검색 상자에 action="https://www.google.com/search?q=car&sxsrf=ALeKk00oK8YP9RI6P3t-9YfvtPoZwqXsng%3A1627294553711...."를 입력합니다.우리가 링크를 보면우리는 이곳에서 우리의 자동차 어휘car를 찾을 수 있다.그래, 이것은 구글이 적어도 이 q 필드가 정상적으로 작동하기를 바란다는 것을 의미한다.

이 링크를 찾으면 필요하지 않은 키워드를 모두 삭제할 수 있습니다.현재 우리q=car는 action와 같다.우리는 또 https://www.google.com/search?라는 단어를 삭제했다.하지만 마지막으로 추가q를 기억하세요.

우리가 링크를 얻은 후에.탭과 텍스트 필드를 만들고 제출 단추를 만듭니다.

그런데 주의하세요. 제가 ?에 텍스트 필드 이름을 주었습니다.왜?구글이 이 name="q" 필드를 원하기 때문이다.우리가 우리의 영역에 무엇을 입력하든지 간에.It 데이터가 q 필드에 속합니다.

이것이 바로 구글 검색의 작업 원리다.
오늘은 여기까지.오늘 우리는 HTML의 폼과 입력 표시를 배웠다.나는 네가 모든 일을 이해하길 바란다.궁금한 점이 있으시면 언제든지 토론에서 저에게 물어보세요.

숙제

당신도 더 잘 연습할 수 있도록 숙제를 해 주셔서 감사합니다.오늘의 숙제는 매우 간단하다.

표 두 장을 만듭니다.

사용자 데이터를 얻는 폼이름, 전화번호, 이메일, 비밀번호, 나이, D-O-B, 가장 좋아하는 음식 등

유튜브 검색의 두 번째 폼을 만든다.내 순서대로 유튜브 검색 링크를 찾아라.

본문의 모든 예시를 연습한다.

보너스

우리는 또 q개의 단추 라벨이 있다.이것은 페이지에 단추를 만드는 데 사용됩니다.이 단추를 제출 단추로 사용할 수 있습니다. <button></button> 추가하기만 하면 됩니다.
예.

<button>Click me</button>

출력

만약 네가 원한다면, 너는 너의 숙제를 나의 라벨에 붙일 수 있다.나는 네가 웹 페이지를 개발하는 것을 보고 매우 기뻤다.
만약 네가 원한다면, 너는 나를 구독할 수 있다.나는 아주 좋은 인터넷 개발 강좌를 만들었다.너도 인터넷에서 강좌를 볼 수 있다
읽어주셔서 감사합니다.