HTML 양식이 숨겨져 있습니다.-프런트엔드 Q&A-php.cn

HTML 양식이 숨겨져 있습니다.

WBOY

풀어 주다： 2023-05-15 16:05:07

원래의

1346명이 탐색했습니다.

HTML 양식은 웹 개발에서 일반적으로 사용되는 도구로, 이를 통해 사용자는 데이터를 입력하고 서버에 제출할 수 있습니다. 양식에서 일부 정보는 사용자가 입력하고 표시해야 하지만 일부 정보는 숨겨야 합니다. 이 기사에서는 HTML 양식을 숨기는 방법을 소개합니다.

양식 요소 숨기기

HTML 양식에는 "숨겨진 요소"라는 요소가 있습니다. 이 요소의 기능은 페이지 레이아웃에 영향을 주지 않고 페이지에서 지정된 요소를 숨기는 것입니다. 간단한 숨겨진 요소 코드는 다음과 같습니다.

<input type="hidden" name="id" value="123">

로그인 후 복사

이 코드는 이름 속성이 "id"이고 값 속성이 "123"인 숨겨진 텍스트 입력 상자를 만듭니다. 사용자가 양식을 제출하면 숨겨진 요소의 값도 서버에 제출됩니다.

전체 양식 숨기기

때로는 전체 양식을 숨겨야 할 때가 있는데, 이는 CSS를 사용하여 수행할 수 있습니다. 예를 들어, 다음 코드는 페이지에서 양식을 숨깁니다.

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

<style>
#myForm {
  display: none;
}
</style>

로그인 후 복사

위 코드에서 양식은 ID가 "myForm"인

요소에 포함되어 있습니다. 그런 다음 CSS를 사용하여 양식을 숨기고 표시 속성을 "none"으로 설정하면 됩니다.

양식의 특정 필드 숨기기

양식에서 하나 이상의 필드만 숨기려면 CSS를 사용하면 됩니다. 예를 들어 다음 코드는 형식에서 "password" 텍스트 입력 상자를 숨깁니다.

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

<style>
input[name="password"] {
  display: none;
}
</style>

로그인 후 복사

위 코드에서는 CSS 속성 선택기를 사용하여 이름 속성이 "password"인 입력 상자를 선택하고 표시 속성을 설정합니다. "없음"으로.

양식의 특정 부분 숨기기

때로는 양식을 여러 부분으로 나누어 사용자가 한 부분을 작성한 후 해당 부분을 숨기고 다음 부분을 표시해야 할 때가 있습니다. 이는 JavaScript를 사용하여 달성할 수 있습니다. 예:

<form>
  <div id="part1">
    <input type="text" name="name">
    <input type="email" name="email">
    <button onclick="nextPart()">Next</button>
  </div>
  <div id="part2" style="display:none;">
    <input type="password" name="password">
    <button type="submit">Submit</button>
  </div>
</form>

<script>
function nextPart() {
  document.getElementById("part1").style.display = "none";
  document.getElementById("part2").style.display = "block";
}
</script>

로그인 후 복사

위 코드에서 양식은 두 부분, 즉 ID가 "part1" 및 "part2"인 두 개의

요소로 나뉩니다. 여기서 "part2"는 처음에 "display:none"으로 설정됩니다. "를 선택하여 이 섹션을 숨깁니다. 사용자가 "Next" 버튼을 클릭하면 nextPart() 함수가 호출됩니다. 이 함수는 "part1"과 "part2"의 스타일을 "display:none;"으로 설정하여 숨깁니다. 그리고 디스플레이.

요약:

웹 개발에서는 HTML 양식의 일부 정보를 숨겨야 하며, 이는 숨겨진 요소, CSS 및 JavaScript와 같은 방법을 사용하여 달성할 수 있습니다. 개발자는 더 나은 사용자 경험을 달성하기 위해 실제 요구 사항에 따라 적절한 방법을 선택할 수 있습니다.

위 내용은 HTML 양식이 숨겨져 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!