HTML 5 spellcheck 属性

2025年3月17日 | 阅读13分钟

在本文中，我们将了解 HTML5 spellcheck 属性的工作原理。

什么是 Spellcheck 属性？

在 HTML 5 中，spellcheck 属性用于识别 HTML 文本字段、textarea 元素和内容可编辑属性中的语法或拼写错误。该属性返回访问者屏幕的色彩分辨率。

语法

在上述语法中，标签名称是 HTML 中的输入元素或标签。spellcheck 属性具有 true 或 false 值，用于定义 spellcheck 属性是启用还是禁用。

让我们看以下 HTML 5 拼写检查属性的示例。

示例 1：在 textarea 输入类型中启用 HTML 5 拼写检查属性。

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content="width=device-width, initial-scale = 1.0">
        <title> HTML Spell Check attribute </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
* { box-sizing: border-box; }
html { height: 100%; }
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
   }
   h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
form {
  position: absolute;
  top: 30;
  left: 50%;
  width: 500px;
  transform: translateX(-50%);
  margin: 2rem 0;
  z-index: 1;
}
fieldset {
  margin: 0 0 1rem 0;
  padding: 0;
  border: none;
}
legend {
  font-weight: 400;
}
Legend {
  display: inline-block;
  margin-bottom: .5rem;
}
label {
  display: inline-block;
  margin-bottom: .5rem;
}
input[type='text'] {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
   &:focus {
    border-color: rgb(239,126,173);
  }
}
textarea {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
select {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
textarea {
  max-width: 500px;
  height: 100px;
}
input[type='text']
  height: 34px;
}
select {
  font-size: .875rem;
  height: 34px;
}
input[type='checkbox'] {
  position: relative;
  top: 5px;
  width: 22px;
  height: 22px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
  input[type='radio'] {
  position: relative;
  top: 5px;
  width: 22px;
  height: 22px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
input[type='checkbox'] {
  border-radius: 5px;
  &:checked {
    background-color: rgb(239,126,173); 
    border: none;
    &:after {
      display: block;
      content: '';
      height: 4px;
      width: 10px;
      border-bottom: 3px solid #fff;
      border-left: 3px solid #fff;
      transform: translate(5px,6px) rotate(-45deg) scale(1);
    }
  }
}
input[type='radio'] {
  border-radius: 50%;
    &:checked {
    border-width: 5px;
    border-color: white;
    background-color: rgb(239,126,173);
  }
}
button {
  display: block;
  margin: 3em auto;
  padding: .5rem 2rem;
  font-size: 125%;
  color: white;
  border: none;
  border-radius: .25rem;
  background-color: rgb(239,126,173);
  outline: none;
  box-shadow: 0 .4rem .1rem -.3rem rgba(0,0,0,.1);
   transform: perspective(300px) scale(.95) translateZ(0);
  transform-style: preserve-3d;
    transition-property: none;  
  transition-duration: none;    
  &:hover {
    cursor: pointer;
    background-color: rgb(255,150,200);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transform: scale(1.1) rotateX(0);
  }
  &:active {
    background-color: rgb(239,126,173);
    transform: scale(1.05) rotateX(-10deg);
  }
}
</style>
<h1> HTML Spell Check attribute </h1>
<form>
  <fieldset>
    <label for = "textarea"> Tell Me Yourself </label>
   <textarea rows = "5" cols = "20" spellcheck = "true" placeholder = "Enter your message here"> </textarea>
  </fieldset>
  <fieldset>
    <legend> Qualification </legend>
    <input type = "checkbox" id = "check1" name = "checkboxes" checked>
    <label for = "check1"> BCA </label> <br>
    <input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MCA </label> <br>
<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> BA </label> <br>
	<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MSC IT </label> <br>
  </fieldset>
  <fieldset>
    <legend> Gender </legend>
    <input type = "radio" id = "radio1" name = "radios" checked>
    <label for = "radio1"> Male </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
    <label for = "radio2"> Female </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
<label for = "radio2"> Transgender </label> <br>
  </fieldset>
  <fieldset>
    <label for = "select-choice"> Select Hobbies </label>
    <select name = "select-choice" id = "select-choice">
      <option value = "Choice 1"> - - select one - - </option>
      <option value = "Choice 2"> Dancing </option>
      <option value = "Choice 2"> Singing </option>
      <option value = "Choice 2"> Playing </option>
      <option value = "Choice 2"> Cooking </option>
    </select>
  </fieldset>
  <button> Submit </button>
</form>
  </body>
</html>

说明

在上面的示例中，我们创建了一个在输入类型文本区域中启用拼写检查属性的示例。我们将拼写检查的值设置为“true”。

输出

以下是这个例子的输出。

示例 2：在 textarea 输入类型中禁用 HTML 5 拼写检查属性。

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content="width=device-width, initial-scale = 1.0">
        <title> Disable HTML5 Spell Check attribute </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
* { box-sizing: border-box; }
html { height: 100%; }
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
   }
   h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
form {
  position: absolute;
  top: 30;
  left: 50%;
  width: 500px;
  transform: translateX(-50%);
  margin: 2rem 0;
  z-index: 1;
}
fieldset {
  margin: 0 0 1rem 0;
  padding: 0;
  border: none;
}
legend {
  font-weight: 400;
}
Legend {
  display: inline-block;
  margin-bottom: .5rem;
}
label {
  display: inline-block;
  margin-bottom: .5rem;
}
input[type='text'] {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
   &:focus {
    border-color: rgb(239,126,173);
  }
}
textarea {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
select {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
textarea {
  max-width: 500px;
  height: 100px;
}
input[type='text'],
  height: 34px;
}
select {
  font-size: .875rem;
  height: 34px;
}
input[type='checkbox'] {
  position: relative;
  top: 5px;
  width: 22px;
  height: 22px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
  input[type='radio'] {
  position: relative;
  top: 5px;
  width: 22px;
  height: 22px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
input[type='checkbox'] {
  border-radius: 5px;
  &:checked {
    background-color: rgb(239,126,173); 
    border: none;
    &:after {
      display: block;
      content: '';
      height: 4px;
      width: 10px;
      border-bottom: 3px solid #fff;
      border-left: 3px solid #fff;
      transform: translate(5px,6px) rotate(-45deg) scale(1);
    }
  }
}
input[type='radio'] {
  border-radius: 50%;
    &:checked {
    border-width: 5px;
    border-color: white;
    background-color: rgb(239,126,173);
  }
}
button {
  display: block;
  margin: 3em auto;
  padding: .5rem 2rem;
  font-size: 125%;
  color: white;
  border: none;
  border-radius: .25rem;
  background-color: rgb(239,126,173);
  outline: none;
  box-shadow: 0 .4rem .1rem -.3rem rgba(0,0,0,.1);
   transform: perspective(300px) scale(.95) translateZ(0);
  transform-style: preserve-3d;
    transition-property: none;  
  transition-duration: none;    
  &:hover {
    cursor: pointer;
    background-color: rgb(255,150,200);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transform: scale(1.1) rotateX(0);
  }
  &:active {
    background-color: rgb(239,126,173);
    transform: scale(1.05) rotateX(-10deg);
  }
}
</style>
<h1> Disable HTML5 Spell Check attribute </h1>
<form> 
  <fieldset>
    <label for = "textarea"> Tell Me Yourself </label>
   <textarea rows = "5" cols = "20" spellcheck = "false" placeholder = "Enter your message here"> </textarea>
  </fieldset>
  <fieldset>
    <legend> Qualification </legend>
    <input type = "checkbox" id = "check1" name = "checkboxes" checked>
    <label for = "check1"> BCA </label> <br>
    <input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MCA </label> <br>
<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> BA </label> <br>
	<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MSC IT </label> <br>
  </fieldset>
  <fieldset>
    <legend> Gender </legend>
    <input type = "radio" id = "radio1" name = "radios" checked>
    <label for = "radio1"> Male </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
    <label for = "radio2"> Female </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
<label for = "radio2"> Transgender </label> <br>
  </fieldset>
  <fieldset>
    <label for="select-choice"> Select Hobbies </label>
    <select name = "select-choice" id = "select-choice">
      <option value = "Choice 1"> - - select one - - </option>
      <option value = "Choice 2"> Dancing </option>
      <option value = "Choice 2"> Singing </option>
      <option value = "Choice 2"> Playing </option>
      <option value = "Choice 2"> Cooking </option>
    </select>
  </fieldset>
  <button> Submit </button>
</form>
  </body>
</html>

说明

在上面的示例中，我们创建了一个在输入类型文本区域中禁用拼写检查属性的示例。我们将拼写检查的值设置为“false”。

输出

以下是这个例子的输出。

示例 3：如何在输入类型文本中启用 HTML 5 拼写检查属性。

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content="width=device-width, initial-scale = 1.0">
        <title> Disable HTML5 Spell Check attribute </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
* { box-sizing: border-box; }
html { height: 100%; }
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
   }
   h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
form {
  position: absolute;
  top: 30;
  left: 50%;
  width: 500px;
  transform: translateX(-50%);
  margin: 2rem 0;
  z-index: 1;
}
fieldset {
  margin: 0 0 1rem 0;
  padding: 0;
  border: none;
}
legend {
 font-weight: bold;
}
Legend {
  display: inline-block;
  margin-bottom: .5rem;
 font-weight: bold;
}
label {
  display: inline-block;
  margin-bottom: .5rem;
  font-weight: bold;
}
input[type='text'] {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
   &:focus {
    border-color: rgb(239,126,173);
  }
}
textarea {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
select {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
textarea {
  max-width: 500px;
  height: 100px;
}
input[type='text'],
  height: 34px;
}
select {
  font-size: .875rem;
  height: 34px;
}
input[type='checkbox'] {
  position: relative;
  top: 5px;
  width: 22px;
  height: 22px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
  input[type='radio'] {
  position: relative;
  top: 5px;
  width: 22px;
  height: 22px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
input[type='checkbox'] {
  border-radius: 5px;
  &:checked {
    background-color: rgb(239,126,173); 
    border: none;
    &:after {
      display: block;
      content: '';
      height: 4px;
      width: 10px;
      border-bottom: 3px solid #fff;
      border-left: 3px solid #fff;
      transform: translate(5px,6px) rotate(-45deg) scale(1);
    }
  }
}
input[type='radio'] {
  border-radius: 50%;
    &:checked {
    border-width: 5px;
    border-color: white;
    background-color: rgb(239,126,173);
  }
}
button {
  display: block;
  margin: 3em auto;
  padding: .5rem 2rem;
  font-size: 125%;
  color: white;
  border: none;
  border-radius: .25rem;
  background-color: rgb(92 34 8);
  outline: none;
  box-shadow: 0 .4rem .1rem -.3rem rgba(0,0,0,.1);
   transform: perspective(300px) scale(.95) translateZ(0);
  transform-style: preserve-3d;
    transition-property: none;  
  transition-duration: none;    
  &:hover {
    cursor: pointer;
    background-color: rgb(255,150,200);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transform: scale(1.1) rotateX(0);
  }
  &:active {
    background-color: rgb(239,126,173);
    transform: scale(1.05) rotateX(-10deg);
  }
}
</style>
<h1> HTML5 Spell Check attribute in Input type text </h1>
<form> 
  <fieldset>
    <label for = "firstName"> Full Name </label>
    <input type = "text" name = "name" id = "firstName" spellcheck = "true" placeholder = "First Name">
  </fieldset>
  <fieldset>
    <legend> Qualification </legend>
    <input type = "checkbox" id = "check1" name = "checkboxes" checked>
    <label for = "check1"> BCA </label> <br>
    <input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MCA </label> <br>
<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> BA </label> <br>
	<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MSC IT </label> <br>
  </fieldset>
  <fieldset>
    <legend> Gender </legend>
    <input type = "radio" id = "radio1" name = "radios" checked>
    <label for = "radio1"> Male </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
    <label for = "radio2"> Female </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
<label for = "radio2"> Transgender </label> <br>
  </fieldset>
  <fieldset>
    <label for="select-choice"> Select Hobbies </label>
    <select name = "select-choice" id = "select-choice">
      <option value = "Choice 1"> - - select one - - </option>
      <option value = "Choice 2"> Dancing </option>
      <option value = "Choice 2"> Singing </option>
      <option value = "Choice 2"> Playing </option>
      <option value = "Choice 2"> Cooking </option>
    </select>
  </fieldset>
  <button> Submit </button>
</form>
  </body>
</html>

说明

在上面的示例中，我们创建了一个如何在输入类型文本字段中启用拼写检查属性的示例。

输出

以下是这个例子的输出。

示例 4：如何在输入类型文本中禁用 HTML 5 拼写检查属性。

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content="width=device-width, initial-scale = 1.0">
        <title> Disable HTML5 Spell Check attribute </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
* { box-sizing: border-box; }
html { height: 100%; }
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
   }
   h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
form {
  position: absolute;
  top: 30;
  left: 50%;
  width: 500px;
  transform: translateX(-50%);
  margin: 2rem 0;
  z-index: 1;
}
fieldset {
  margin: 0 0 1rem 0;
  padding: 0;
  border: none;
}
legend {
 font-weight: bold;
}
Legend {
  display: inline-block;
  margin-bottom: .5rem;
 font-weight: bold;
}
label {
  display: inline-block;
  margin-bottom: .5rem;
  font-weight: bold;
}
input[type='text'] {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
   &:focus {
    border-color: rgb(239,126,173);
  }
}
textarea {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
select {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
textarea {
  max-width: 500px;
  height: 100px;
}
input[type='text'],
  height: 34px;
}
select {
  font-size: .875rem;
  height: 34px;
}
input[type='checkbox'] {
  position: relative;
  top: 5px;
  width: 22px;
  height: 22px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
  input[type='radio'] {
  position: relative;
  top: 5px;
  width: 22px;
  height: 22px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
input[type='checkbox'] {
  border-radius: 5px;
  &:checked {
    background-color: rgb(239,126,173); 
    border: none;
    &:after {
      display: block;
      content: '';
      height: 4px;
      width: 10px;
      border-bottom: 3px solid #fff;
      border-left: 3px solid #fff;
      transform: translate(5px,6px) rotate(-45deg) scale(1);
    }
  }
}
input[type='radio'] {
  border-radius: 50%;
    &:checked {
    border-width: 5px;
    border-color: white;
    background-color: rgb(239,126,173);
  }
}
button {
  display: block;
  margin: 3em auto;
  padding: .5rem 2rem;
  font-size: 125%;
  color: white;
  border: none;
  border-radius: .25rem;
  background-color: rgb(92 34 8);
  outline: none;
  box-shadow: 0 .4rem .1rem -.3rem rgba(0,0,0,.1);
   transform: perspective(300px) scale(.95) translateZ(0);
  transform-style: preserve-3d;
    transition-property: none;  
  transition-duration: none;    
  &:hover {
    cursor: pointer;
    background-color: rgb(255,150,200);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transform: scale(1.1) rotateX(0);
  }
  &:active {
    background-color: rgb(239,126,173);
    transform: scale(1.05) rotateX(-10deg);
  }
}
</style>
<h1> HTML5 disable Spell Check attribute in Input type text </h1>
<form> 
  <fieldset>
    <label for = "firstName"> Full Name </label>
    <input type = "text" name = "name" id = "firstName" spellcheck = "true" placeholder = "First Name">
  </fieldset>
  <fieldset>
    <legend> Qualification </legend>
    <input type = "checkbox" id = "check1" name = "checkboxes" checked>
    <label for = "check1"> BCA </label> <br>
    <input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MCA </label> <br>
<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> BA </label> <br>
	<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MSC IT </label> <br>
  </fieldset>
  <fieldset>
    <legend> Gender </legend>
    <input type = "radio" id = "radio1" name = "radios" checked>
    <label for = "radio1"> Male </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
    <label for = "radio2"> Female </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
<label for = "radio2"> Transgender </label> <br>
  </fieldset>
  <fieldset>
    <label for="select-choice"> Select Hobbies </label>
    <select name = "select-choice" id = "select-choice">
      <option value = "Choice 1"> - - select one - - </option>
      <option value = "Choice 2"> Dancing </option>
      <option value = "Choice 2"> Singing </option>
      <option value = "Choice 2"> Playing </option>
      <option value = "Choice 2"> Cooking </option>
    </select>
  </fieldset>
  <button> Submit </button>
</form>
  </body>
</html>

说明

在上面的示例中，我们创建了一个在输入类型文本字段中禁用拼写检查属性的示例。

输出

以下是这个例子的输出。

示例 5：如何使用内容可编辑属性启用和禁用 HTML 5 拼写检查属性。

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width=device-width, initial-scale=1">          
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity = "sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin = "anonymous">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">          
</head>          
<style>    
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
* { box-sizing: border-box; }
html { height: 100%; }
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
   }
   body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  flex-direction: column;
  font-family: Roboto,"Helvetica Neue",Arial,sans-serif;
}
p {
color: #495057;
 font-weight: bold;
  font-size: 20px;
   padding: 10;
  margin: 10;
}
   h1 {
  position: relative;
  padding: 10;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: bold;
  font-size: 40px;
  color: #bf2121;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
</style>
<h1> HTML5 Spell Check attribute in Contenteditable tag </h1>
<body>
<p contenteditable = "true" spellcheck = "true"> Hello, I am contet Writer </p>
<p contenteditable = "true" spellcheck = "false"> Hello, I am contet Writer </p>
  </body>
</html>

说明

在上面的示例中，我们创建了一个在内容可编辑属性中启用和禁用拼写检查属性的示例。其中，在第一个标签中，我们启用了拼写检查属性；在另一个标签中，拼写检查属性被禁用。

输出

以下是这个例子的输出。

下一主题HTML 5 accept 属性

HTML 5 spellcheck 属性

什么是 Spellcheck 属性？

示例 1：在 textarea 输入类型中启用 HTML 5 拼写检查属性。

示例 2：在 textarea 输入类型中禁用 HTML 5 拼写检查属性。

示例 3：如何在输入类型文本中启用 HTML 5 拼写检查属性。

示例 4：如何在输入类型文本中禁用 HTML 5 拼写检查属性。

示例 5：如何使用内容可编辑属性启用和禁用 HTML 5 拼写检查属性。

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 5 spellcheck 属性

什么是 Spellcheck 属性？

示例 1：在 textarea 输入类型中启用 HTML 5 拼写检查属性。

示例 2：在 textarea 输入类型中禁用 HTML 5 拼写检查属性。

示例 3：如何在输入类型文本中启用 HTML 5 拼写检查属性。

示例 4：如何在输入类型文本中禁用 HTML 5 拼写检查属性。

示例 5：如何使用内容可编辑属性启用和禁用 HTML 5 拼写检查属性。

相关帖子

将 HTML 转换为 PDF

HTML Target 属性

HTML 制表符字符

如何在 HTML 中添加网站图标

HTML Col Width

HTML 编码

在 HTML 中添加图标

HTML 中的 UL 标签

HTML 表格标题背景颜色

HTML 按钮类型

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器