HTML 문서: 웹 페이지에서 입력 상자 효과를 구현하는 방법(자세한 코드 설명)
- 奋力向前원래의
- 2021-08-17 16:58:0518434검색
이전 글 "html 텍스트에 정렬된 목록과 정렬되지 않은 목록을 추가하는 방법을 단계별로 가르쳐주세요(자세한 코드 설명) "에서 html을 사용하여 정렬된 목록과 정렬되지 않은 목록을 텍스트에 추가하는 방법을 소개했습니다. 다음 기사에서는 HTML 웹 페이지에서 입력 상자 효과를 구현하는 방법을 소개합니다.
<input> 태그 사양: 텍스트 필드, 체크박스, 라디오 버튼 등 다양한 형태로 사용자 정보 및 입력 필드를 수집합니다. <input> 标签指定：搜集用户信息并且输入字段很多种形式，比如：文本字段、复选框、单选按钮、等等。
添加输入框的方法
<input type="">这个type是告诉它是个什么类型，比如txt文本类型，就是这个默认的一个类型，给大家通过代码示例看看是什么样呢？
代码示例
<body> <input type="text"> </body>
代码效果
 "162918962878752HTML 문서: 웹 페이지에서 입력 상자 효과를 구현하는 방법(자세한 코드 설명)")
代码结束出来，相信大家这个都也挺眼熟的，这就是一个输入框，咱前面可以再加上一行字用<p></p>来试一试。
代码示例
<body> <p>用户名：</p> <input type="text"> </body>
代码效果
能看到用户名，但是用户名后边就会有什么，添加密码，我们为了这个稍微看的舒坦一点，用<div>把它弄成一行。<p><strong>代码示例</strong></p><pre class="brush:php;toolbar:false"><body>
<div>
用户名：
<input type="text">
</div>
</body></pre><p><strong>代码效果</strong></p>
<p><img src="https://img.php.cn/upload/image/474/399/279/1629189891481858.jpg" title="1629189891481858.jpg" alt="HTML 문서: 웹 페이지에서 입력 상자 효과를 구현하는 방법(자세한 코드 설명)"></p>
<p>结束出来就差不多是这么一个状态然后这里边是不是还有密码</p>
<p><strong>代码示例</strong><br></p><pre class="brush:php;toolbar:false"><body>
<div>
用户名：
<input type="text">
</div>
<div>
密码：
<input type="text">
</div>
</body></pre><p><strong>代码效果</strong><br></p>
<p><strong><img src="https://img.php.cn/upload/image/208/930/774/1629189997710553.jpg" title="1629189997710553.jpg" alt="HTML 문서: 웹 페이지에서 입력 상자 효과를 구현하는 방법(자세한 코드 설명)"></strong></p>
<p>有一点不合适了，因为大家能看到这密码，正常来说密码是看不见。使用<code>password实现密码效果。
代码示例
密码： <input type="password">
代码效果
密码就是差不多这么一个状态，这个网页中比较常见的一种东西。接下来复选框怎么实现呢？可以使用checkbox来实现
代码示例
<div> 1选项 <input type="checkbox"> 2选项 <input type="checkbox"> 3选项 <input type="checkbox"> </div>
代码效果
这是复选框，接下来咱们稍微说一下单选框，这个网上比较见常用的，它都是用咱们这个，input是可以做到，使用radio
입력 상자 추가 방법
<input type="">이 유형은 기본 유형인 txt 텍스트 유형과 같이 어떤 유형인지 알려줍니다. , 어떻게 생겼는지 확인하기 위해 코드 예제를 제공하겠습니다. 코드 샘플
单选： <input type="radio">코드 효과
코드가 끝납니다. 다들 익숙하시리라 믿습니다. 이것은 입력 상자입니다. <p>를 사용하여 그 앞에 텍스트 한 줄을 추가할 수 있습니다. 한번 시도해 보겠습니다. <strong></strong></p>코드 샘플<p><strong><pre class="brush:php;toolbar:false"><div>
<input type="color">
</div></pre></strong><br>코드 효과</p>
<p><strong><img src="https://img.php.cn/upload/image/675/767/261/1629190522876086.gif" title="1629190522876086.gif" alt="HTML 문서: 웹 페이지에서 입력 상자 효과를 구현하는 방법(자세한 코드 설명)"> 77.jpg" alt="WeChat 스크린샷_20210817164111.jpg"/></strong></p>
<p>사용자 이름을 볼 수 있지만 사용자 이름 뒤에 뭔가가 있을 것입니다. 이를 더 쉽게 볼 수 있도록 <code>를 사용하여 한 줄로 만듭니다.
🎜🎜종료되면 거의 이 상태가 됩니다. 그럼 여기에 비밀번호가 있나요? img src="https://img.php.cn/upload/image /208/930/774/1629189997710553.jpg" title="1629189997710553.jpg" alt="WeChat 스크린샷_20210817164528.jpg"/>🎜🎜🎜 비밀번호는 누구나 볼 수 있기 때문에 좀 부적절하지만 일반적으로 비밀번호는 보이지 않습니다. 비밀번호 효과를 얻으려면 password를 사용하세요. 🎜🎜🎜코드 샘플🎜🎜rrreee🎜🎜코드 효과🎜🎜🎜🎜🎜비밀번호는 거의 이 상태인데, 이 웹페이지에서는 비교적 흔한 일입니다. 다음에 확인란을 구현하는 방법은 무엇입니까? 체크박스를 사용하면 🎜🎜🎜코드 예제🎜🎜rrreee🎜🎜코드 효과🎜🎜🎜🎜
🎜🎜체크박스입니다. 다음으로 온라인에서 많이 사용되는 라디오버튼에 대해 이야기해보겠습니다. , 라디오 버튼을 구현하기 위해 radio를 사용하여 입력을 사용하여 수행할 수 있습니다. 🎜🎜🎜코드 샘플🎜🎜rrreee🎜🎜코드 효과🎜🎜🎜🎜🎜🎜이 라디오 외에도 색상도 상대적으로 중요합니다. 🎜🎜🎜코드 예시🎜🎜rrreee🎜🎜코드 효과🎜🎜🎜🎜🎜🎜🎜🎜🎜보시다시피 이건 좀 흥미롭네요. 색상을 직접 변경할 수 있습니다. 🎜🎜알았어, 끝났어! 🎜🎜추천 학습: 🎜Html 비디오 튜토리얼🎜🎜
위 내용은 HTML 문서: 웹 페이지에서 입력 상자 효과를 구현하는 방법(자세한 코드 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!