revision:
The type attribute can be used on the following elements: <a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style>.
For <button> elements, the type attribute specifies the type of button.
For <input> elements, the type attribute specifies the type of <input> element to display.
For <embed>, <link>, <object>, <script>, <source>, <style> elements, the type attribute specifies the Internet media type (formerly known as MIME type).
<element type=" "></element>
<form style="margin-left:3vw;" action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
<object style="margin-left:3vw;" data="../../images/car2.jpg" type="image/jpg" width="500"
height="300"></object>
By default, a small arrow will appear at the end of input type = "number", but sometimes we need to remove it. What should we do?
<div>
<input type="number" class="number" placeholder="input number"/>
<input type="number" class="no-arrow" placeholder="input number"/>
</div>
<style>
.number, .no-arrow{width: 25vw; padding: 1vw; margin-top: 1vw; border-radius: 1vw;
border: solid 0.2vw blue; box-sizing: border-box; background-color:
transparent; outline: none; color: skyblue; font-size: 1vw; caret-color: green; display: block;}
.number::-webkit-input-placeholder {color: #4f4c5f;font-size: 1vw;}
.no-arrow::-webkit-input-placeholder {color: #4f4c5f;font-size: 1vw;}
.no-arrow::-webkit-outer-spin-button,.no-arrow::-webkit-inner-spin-button { -webkit-appearance: none;}
<div>
<label for="text-input">Text Input</label>
<input class="input" id="text-input" type="text" /><br>
<label for="date-input">Date Input</label>
<input class="input" id="date-input" type="date" /><br>
<label for="file-input">File Input</label>
<input id="file-input" class="input" type="file" /><br>
<label for="readonly-input">Read-Only Input</label>
<input class="input" id="readonly-input" type="text" readonly
value="This can only be copied" /><br>
<label for="disabled-input">Disabled Input</label>
<input class="input" id="disabled-input" type="text" disabled /><br>
<label for="textarea">Textarea</label>
<textarea class="input" id="textarea"></textarea><br>
<label for="textarea-disabled">Textarea Disabled</label>
<textarea class="input" id="textarea-disabled" disabled></textarea><br>
</div>
<style>
:root {--input-border: #8b8a8b; --input-focus-h: 245; --input-focus-s: 100%; --input-focus-l: 42%;}
.input {margin-left:5vw; font-size: 16px; font-size: Max(16px, 1em);font-family: inherit;
padding: 0.25em 0.5em;
background-color: aquamarine; border: 2px solid var(--input-border); border-radius: 4px;
transition: 180ms box-shadow ease-in-out;}
.input:focus {border-color: hsl(var(--input-focus-h), var(--input-focus-s),var(--input-focus-l));
box-shadow: 0 0 0 3px hsla(var(--input-focus-h), var(--input-focus-s),
calc(var(--input-focus-l) + 40%), 0.8 );
outline: 3px solid transparent;}
.input:not(textarea) {line-height: 1; height: 2.25rem;}
input[type="file"] {font-size: 0.9em; padding-top: 0.35rem;}
textarea.input {resize: vertical;}
.input[readonly] {border-style: dotted; cursor: not-allowed; color: #777;}
.input[disabled] {--input-border: #ccc; background-color: #eee; cursor: not-allowed;}
label {margin-left:5vw; font-size: 1.125rem; font-weight: 500; line-height: 1;}
.input + label {margin-top: 2rem;}
</style>
<div>
<input type="text" class="caret-color" placeholder=""/>
</div>
<style>
.caret-color {width: 25vw; padding: 1vw; margin-top: 2vw; border-radius: 1vw; border: solid 1px #ffd476;
box-sizing: border-box; background-color: transparent; outline: none; color: lightgreen;
font-size: 1.4vw; caret-color: #ffd476;}
.caret-color::-webkit-input-placeholder { color: #4f4c5f; font-size: 1.4vw;}
</style>