HTML 문서: 웹 페이지에서 입력 상자 효과를 구현하는 방법(자세한 코드 설명)-HTML 튜토리얼-php.cn

HTML 문서: 웹 페이지에서 입력 상자 효과를 구현하는 방법(자세한 코드 설명)

奋力向前

풀어 주다： 2021-08-17 17:06:00

원래의

18499명이 탐색했습니다.

이전 글 "html 텍스트에 정렬된 목록과 정렬되지 않은 목록을 추가하는 방법을 단계별로 가르쳐주세요(자세한 코드 설명) "에서 html을 사용하여 정렬된 목록과 정렬되지 않은 목록을 텍스트에 추가하는 방법을 소개했습니다. 다음 기사에서는 HTML 웹 페이지에서 입력 상자 효과를 구현하는 방법을 소개합니다.

HTML 문서: 웹 페이지에서 입력 상자 효과를 구현하는 방법(자세한 코드 설명)

<input> 태그 사양: 텍스트 필드, 체크박스, 라디오 버튼 등 다양한 형태로 사용자 정보 및 입력 필드를 수집합니다. <input> 标签指定：搜集用户信息并且输入字段很多种形式，比如：文本字段、复选框、单选按钮、等等。

添加输入框的方法

<input type="">这个type是告诉它是个什么类型，比如txt文本类型，就是这个默认的一个类型，给大家通过代码示例看看是什么样呢？

代码示例

<body>
<input type="text">
</body>

로그인 후 복사

代码效果

代码结束出来，相信大家这个都也挺眼熟的，这就是一个输入框，咱前面可以再加上一行字用来试一试。

代码示例

<body>
<p>用户名：</p>
<input type="text">
</body>

로그인 후 복사

代码效果

能看到用户名，但是用户名后边就会有什么，添加密码，我们为了这个稍微看的舒坦一点，用<div>把它弄成一行。

代码示例

<body>
<div>
用户名：
<input type="text">
</div> 
</body>

로그인 후 복사

代码效果

结束出来就差不多是这么一个状态然后这里边是不是还有密码

代码示例

<body>
<div>
用户名：
<input type="text">
</div> 
<div>
密码：
<input type="text">
</div> 
</body>

로그인 후 복사

代码效果

有一点不合适了，因为大家能看到这密码，正常来说密码是看不见。使用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">

로그인 후 복사

코드 효과

1. gif" alt="HTML 문서: 웹 페이지에서 입력 상자 효과를 구현하는 방법(자세한 코드 설명)"/>

코드가 끝납니다. 다들 익숙하시리라 믿습니다. 이것은 입력 상자입니다.

<p>< /code>를 사용하여 그 앞에 텍스트 한 줄을 추가할 수 있습니다. 한번 시도해 보겠습니다. 
코드 샘플<p><div>
<input type="color">
</div>
로그인 후 복사

코드 효과<p> 77.jpg" alt="WeChat 스크린샷_20210817164111.jpg"/>
<p>사용자 이름을 볼 수 있지만 사용자 이름 뒤에 뭔가가 있을 것입니다. 이를 더 쉽게 볼 수 있도록 를 사용하여 한 줄로 만듭니다. 
<p>
코드 예<p>rrreee
코드 효과🎜🎜🎜🎜🎜종료되면 거의 이 상태가 됩니다. 그럼 여기에 비밀번호가 있나요? 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!