양식!!!

온라인 서비스에 가입하고 이름과 정보를 입력해야 합니까? 양식을 작성하셨습니다. 이들은 웹 개발에서 많이 사용됩니다. 사용자 계정에 로그인하기 위한 로그인 양식 또는 Google과 같은 검색 표시줄과 같은 양식에는 다양한 용도가 있습니다(필드가 하나뿐이지만 여전히 양식입니다).

지금 우리는 양식의 백엔드가 아닌 프론트엔드 부분만 배우고 있습니다.

꼬리표!

자체적으로 사용되는 <form></form> 태그는 아무 것도 표시하지 않습니다. 필드에 레이블을 지정하려면 <p> 태그가 필요하고 양식을 표시하려면 <input> 태그도 필요합니다(닫는 입력 태그 없음).

대부분의 입력 태그에는 유용한 방식으로 텍스트를 표시하는 데 도움이 되는 "유형"속성이 지정된 것 같습니다. 한 가지 예는 로그인 양식입니다.

<form>
     <p>Username</p>
     <input type="text">
     <p>Password</p>
     <input type="password">
</form>

다음과 같습니다.


코가 많은 사람들로부터 암호를 보호하기 위해 암호가 난독화되는 방법을 볼 수 있습니다.

양식에 자리 표시자 텍스트를 추가할 수도 있습니다! 이를 위해 "placeholder"라는 또 다른 속성을 사용합니다. 여기에서 비어 있는 양식을 볼 수 있으며, 필드가 채워지지 않은 위의 코드가 어떻게 보이는지 보여줍니다.



자리 표시자를 추가하는 코드는 다음과 같습니다.

<form>
     <p>Username</p>
     <input type="text" placeholder="Username here please!">
     <p>Password</p>
     <input type="password" placeholder="Password here please!">
</form>

사용자가 수행할 작업을 안내하는 데 도움이 되도록 빈 필드에 입력한 텍스트를 볼 수 있습니다.


이제 제출 버튼!

비밀번호 필드와 제출 버튼 사이에 로그인 양식에 표시되는 것과 같은 공간을 만들려면 두 개의 태그<br>를 연속으로 추가한 다음 제출 입력 유형을 추가해야 합니다.

<form>
     <p>Username</p>
     <input type="text" placeholder="Username here please!">
     <p>Password</p>
     <input type="password" placeholder="Password here please!">
     <br><br>
     <input type="submit">
</form>

여기있어:


더있다!!!

양식 태그 자체에는 action 및 method라는 두 가지 속성이 있습니다.
action 속성은 양식 데이터를 수신하는 URL입니다.
method 속성은 Get 또는 Post 형식의 두 http 메서드 중 하나를 지정합니다.

예시!

<form action="/fake-url-for-submission" method="post">
     <p>Username</p>
     <input type="text" placeholder="Username here please!">
     <p>Password</p>
     <input type="password" placeholder="Password here please!">
     <br><br>
     <input type="submit">
</form>

여기까지가 다 다루었으므로 시작하기 전에 여기에 언급된 http 메서드에 대한 지식의 일부를 아주 간략하게 공유할 수 있습니다.
가져오기는 데이터를 검색합니다. 게시물 데이터는 파일/레코드/데이터 생성을 위해 서버로 전송됩니다. Put도 존재하며 의미상 동일하게 들리지만 Post와 다릅니다.

앞으로!!!