버튼과 양식 입력의 차이점

이번에는 버튼과 폼 입력의 차이점에 대해 알려드리겠습니다. 버튼과 폼 입력 시 주의사항은 무엇인가요?

먼저 버튼과 입력의 정의에 대해 이야기해 보겠습니다.

라벨은 버튼을 정의합니다

1.

이미지. 이것이 이 요소와 요소를 사용하여 생성된 버튼의 차이점입니다. 2. 컨트롤은 더욱 강력한 기능과 풍부한 콘텐츠를 제공합니다. 3. < ;/button> 태그는 텍스트 또는

multimedia

콘텐츠와 같이 허용되는 모든 본문 콘텐츠를 포함하는 버튼의 콘텐츠입니다.

태그는 사용자가 데이터를 입력할 수 있는 입력 필드를 지정합니다.

요소는 사용자가 데이터를 입력할 수 있는 입력 컨트롤을 선언하는 데 사용됩니다. 특정 유형 유형 속성에 따라 다름 다음은 4가지 유형의 버튼입니다:

, , < ;/button>,

1. : 사용자가 이 버튼을 클릭하면 양식은 < ;form> 태그의 작업 속성을 눌러 양식 콘텐츠를 전송하도록 설정됩니다. 클릭하면 페이지가 새로 고쳐집니다

<form action="#">
    <input type="text" name="username"/><br/>
    <input type="password" name="password"/><br/>
    <input type="submit" value="登录"/></form>

데이터를 제출하기 전에 양식 데이터를 확인하고 싶은 경우:확인 기능이 false를 반환하면 기본 제출 동작이 중지되어 양식 데이터가 제출되지 않습니다. (페이지 새로고침 방지)

참고:

return in

onsubmit=

"

return check()"은 생략할 수 없습니다 2. 일반 버튼은 JS와 일치해야 합니다.

onclick 이벤트 등 유용합니다.

<form action="#" onsubmit="return check()">
    用户名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    <input type="submit" value="登录"/>
    <input type="button" value="提醒" onclick="remind()"/></form><script  LANGUAGE="JavaScript">function check(){
    console.log("提交前先验证");    var checkElement=document.getElementsByTagName("input");     if(checkElement[0].value==="" || checkElement[1].value==="") {         return false;//当用户名或者密码为空时返回false，此时表单不会提交     }
}function remind(){
    alert("这是一个简单按钮，默认不会提交表单数据,不会刷新页面");
}</script><span style="font-size: 14px;">two, </span></p>
<pre class="brush:php;toolbar:false"><button type="submit"></button>表单数据提交按钮，与<input type="submit"/> 用法相同

four, 일반 버튼과

< input type="button"/>

사용법은 동일합니다

<form action="#" onsubmit="return check()">
    用户名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    <button type="submit">登录</button>
    <button type="button"onclick="remind()">提醒</button></form><script  LANGUAGE="JavaScript">function check(){
    console.log("提交前先验证");    var checkElement=document.getElementsByTagName("input");     if(checkElement[0].value==="" || checkElement[1].value==="") {         return false;//当用户名或者密码为空时返回false，此时表单不会提交     }
}function remind(){
    alert("这是一个简单按钮，默认不会提交表单数据,不会刷新页面");
}</script>

참고:

;form> 양식의 경우 브라우저 기본 유형은 버튼입니다.

양식에 있는 경우 브라우저마다 ;

따라서 항상 버튼 유형 값을 설정하는 것이 좋습니다.

요약하자면:

은 와 사용법이 동일하며 양식으로 사용됩니다. 데이터 제출 버튼을 클릭하면 페이지가 기본적으로 새로 고쳐집니다.

및 같은 방식으로 일반 버튼이며 기본적으로 페이지를 새로 고치지 않습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 도서:

반응 네이티브 구성 요소를 테스트하는 농담의 단계는 무엇입니까

Javascript의 암시적 호출에 대한 자세한 설명

JS에 새 요소 노드 추가

위 내용은 버튼과 양식 입력의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!