HTML 재설정 버튼

브라우저에서 양식을 작성하는 동안 사용자가 웹 양식에서 여러 작업을 수행할 수 있는 유연성을 제공하는 것이 중요합니다. 재설정으로 알려진 특수 유형 버튼 중 하나를 사용하면 사용자가 입력한 형식으로 값을 재설정할 수 있습니다. 이 버튼은 사용자에게 재설정 작업을 수행할 수 있는 유연성을 제공합니다. 이 버튼은 기본적으로 사용자가 동일한 양식에 입력한 데이터를 모두 지웁니다. 재설정 후 양식은 기본값으로 채워집니다. 이 기사에서는 다양한 시나리오에서 재설정 버튼의 사용법과 사용 방법을 살펴보겠습니다.

HTML 재설정 버튼 구문

재설정 작업은 태그 또는 꼬리표. 이를 정의하기 위해 이러한 태그에 type 속성이 사용되며 "reset" 값이 전달됩니다.

1. 태그 입력

구문:

<input type="reset">

여기서, Input은 입력 요소를 정의하는 데 사용되는 태그이고, type은 입력 요소의 유형을 정의하는 데 사용되는 속성입니다. 재설정 값은 이 속성에 전달할 수 있는 값 중 하나입니다.

2. 버튼태그

구문:

<button type="reset"></button>

재설정은 Button 요소의 type 속성에 전달할 수 있는 값 중 하나입니다. 앞서 말했듯이 양식이 재설정됩니다. 이 태그가 지원하는 다른 두 가지 값은 "버튼"과 "제출"입니다.

HTML 재설정 버튼 구현 예시

다음은 HTML 재설정 버튼의 예입니다.

예시 #1 – 입력 태그를 이용한 재설정 버튼

코드:

<title>
Reset button in HTML
</title>
<style>
.form-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : 450px;
width : 95%;
}
.form {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.form li {
margin: 12px 0 0 0;
list-style: none;
}
.form label {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.form .field {
width: 80%;
height: 20px;
}
.form input[ type = submit], .form input[ type = reset] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.form input[type = submit]:hover, .form input[ type = reset]:hover {
background: #2173f3;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
</style>


<div class="form-data">
<div class="heading">
<h2 id="HTML-Reset-Button"> HTML Reset Button </h2>
<p> Click on reset button to reset the form data. </p>
</div>
<div>
<form action="#">
<ul class="form">
<li>
<label> First Name <span class="required"> * </span></label>
<input type="text" name="firstName" placeholder=" First name" class="field">
</li>
<li>
<label> Last Name <span class="required"> * </span></label>
<input type="text" name="lastName" placeholder=" Last name" class="field">
</li>
<li>
<label> Email <span class="required"> * </span></label>
<input type="email" name="field3" class="field">
</li>
<li>
<label> Message </label>
<textarea name="message" id="message" class="field-message"></textarea>
</li>
<li>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</li>
</ul>
</form>
</div>
</div>
<script type="text/javascript">
</script>

출력:

입력 상자에 입력해 보세요. 재설정 버튼을 새로 클릭하지 않으면 입력한 데이터가 지워집니다. 재설정을 수행하기 위해 페이지를 새로 고칠 필요는 없습니다. 데이터는 로드된 동일한 페이지에서 동적으로 삭제됩니다.

예시 #2 – 버튼 태그를 사용한 재설정 버튼

코드:

<title>
Reset button in HTML
</title>
<style>
.form-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : 450px;
width : 95%;
}
.form {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.form li {
margin: 12px 0 0 0;
list-style: none;
}
.form label {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.form .field {
width: 80%;
height: 20px;
}
.form button[ type = submit], .form button[ type = reset] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.form button[type = submit]:hover, .form button[ type = reset]:hover {
background: #2173f3;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
</style>


<div class="form-data">
<div class="heading">
<h2 id="HTML-Reset-Button"> HTML Reset Button </h2>
<p> Click on reset button to reset the form data. </p>
</div>
<div>
<form action="#">
<ul class="form">
<li>
<label> First Name <span class="required"> * </span></label>
<input type="text" name="firstName" placeholder=" First name" class="field">
</li>
<li>
<label> Last Name <span class="required"> * </span></label>
<input type="text" name="lastName" placeholder=" Last name" class="field">
</li>
<li>
<label> Email <span class="required"> * </span></label>
<input type="email" name="field3" class="field">
</li>
<li>
<label> Message </label>
<textarea name="message" id="message" class="field-message"></textarea>
</li>
<li>
<button type="reset" value="Reset"> Reset </button>
<button type="submit" value="Submit"> Submit </button>
</li>
</ul>
</form>
</div>
</div>
<script type="text/javascript">
</script>

출력: 

참고: 재설정 버튼은 양식 요소 내부에 배치되면 자동으로 작동합니다. 해당 양식 내부의 재설정 버튼이 자동으로 연결됩니다. 폼 태그 내부에 위치한 재설정 버튼만 해당 폼에 적용할 수 있으며 외부에서는 적용할 수 없습니다. 또한 하나의 양식 안에 여러 개의 재설정 버튼을 배치할 수 있으며 이러한 모든 재설정 버튼은 제대로 작동합니다. 사용자가 실수로 재설정 버튼을 클릭할 가능성이 있고 사용자가 입력한 모든 데이터를 잃게 되므로 재설정 버튼을 주의해서 사용하는 것이 좋습니다.

결론

HTML 재설정 버튼은 웹페이지를 새로 고치지 않고도 양식에 입력된 데이터를 자동으로 재설정하는 강력한 기능을 제공합니다. 재설정 버튼은 일반적으로 양식 요소 내부에서 사용됩니다.

위 내용은 HTML 재설정 버튼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!