HTML5相比較HTML4，在表單中新增了“清除按鈕”的屬性，它允許我們?yōu)槲谋咀侄翁峁┮粋€(gè)方便的按鈕，用于清除其當(dāng)前值。

首先，在HTML5中，我們可以設(shè)置“input”元素的“type”屬性為“text”，然后再為該元素添加一個(gè)“clearable”類。接下來，我們需要在該元素的右側(cè)添加一個(gè)清除按鈕。代碼如下所示：

<input type="text" class="clearable" name="myInput">
<button class="clear-btn">X</button>

其中，“clearable”類用于指定要添加清除按鈕的文本字段，而“clear-btn”類用于設(shè)置清除按鈕的樣式。下面是CSS代碼：

.clearable {
position: relative;
}
.clear-btn {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background-color: #ddd;
color: #333;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.clear-btn:hover {
background-color: #333;
color: #fff;
}

在CSS代碼中，我們使用了“position: relative;”屬性將文本字段與其右側(cè)的清除按鈕聯(lián)系在一起。然后，我們將“clear-btn”類設(shè)置為“position: absolute;”，并使用“top”和“right”屬性將其定位在文本字段的右上角。接著，我們使用“transform: translateY(-50%);”屬性垂直居中該按鈕。最后，我們?yōu)榘粹o設(shè)置了一些基本的樣式，并設(shè)置了鼠標(biāo)懸停時(shí)的樣式。

最后，我們需要使用JavaScript來實(shí)現(xiàn)清除按鈕的功能。我們將為清除按鈕添加一個(gè)事件偵聽器，當(dāng)點(diǎn)擊按鈕時(shí)，該事件偵聽器將清除文本字段的值。代碼如下所示：

const clearBtns = document.querySelectorAll('.clear-btn');
clearBtns.forEach(btn =>{
const input = btn.previousElementSibling;
btn.addEventListener('click', () =>{
input.value = '';
});
});

在JavaScript代碼中，我們使用“querySelectorAll()”方法選擇所有的清除按鈕，并使用“forEach()”方法為每個(gè)按鈕添加一個(gè)事件偵聽器。在事件偵聽器中，我們選擇了文本字段的上一個(gè)元素（也就是清除按鈕本身的前一個(gè)兄弟元素），并將其值設(shè)置為空字符串。

使用以上代碼，我們就可以在HTML5表單中添加一個(gè)方便的清除按鈕了。這對于用戶來說非常方便，因?yàn)樗麄兛梢栽谳斎脲e(cuò)誤時(shí)快速清除文本字段的值，而不需要手動(dòng)刪除每個(gè)字符。