22 HTML Input Types That Will Make Your Forms 10x Better

https://pixicstudio.medium.com/22-html-input-types-that-will-make-your-forms-10x-better-4fcf806e7a58

https://codepen.io/web-strategist/pen/vELyGyb

See the Pen 22 HTML Forms Input Types by Usman (@web-strategist) on CodePen.

1. type=”text”

This is the bread and butter of input fields.

It’s the default input type for single-line text.

<input type="text" name="username" placeholder="Enter your username">

Perfect for names, usernames, or any short text.

Nothing fancy, but you’ll use it everywhere.

2. type=”password”

Ever needed to hide what users are typing?

type="password" masks the input automatically.

<input type="password" name="password" placeholder="Enter password">

The text shows as dots or asterisks.

Security 101 for login forms.

3. type=”email”

Email validation built right in.

It checks for the @ symbol and proper email format on mobile keyboards.

<input type="email" name="email" placeholder="your@email.com">

Mobile browsers automatically show the @ key.

Plus, you get instant validation on submit.

Cleaner. Smarter. Less JS needed.

4. type=”number”

Number inputs give you numeric keyboards on mobile and built-in validation.

<input type="number" name="quantity" min="1" max="100" step="1">

You can set:

• min and max for ranges
• step for increment values

The browser handles all the validation for you.

5. type=”tel”

Telephone inputs bring up the number pad on mobile devices.

<input type="tel" name="phone" placeholder="(123) 456-7890">

It doesn’t validate format automatically, but it makes typing phone numbers way easier on mobile. Perfect for better user experience.

6. type=”url”

URL inputs validate web addresses and show optimized keyboards.

<input type="url" name="website" placeholder="https://example.com">

Mobile keyboards show .com and / buttons. The browser checks for valid URL format automatically.

7. type=”search”

Search inputs look like search fields with a clear button.

<input type="search" name="query" placeholder="Search...">

Some browsers add an X button to clear the input. It’s semantically correct and improves accessibility.

8. type=”date”

Date pickers, no JavaScript needed.

<input type="date" name="birthday" min="1900-01-01" max="2025-12-31">

The browser shows a native date picker. You can set min and max to restrict date ranges. So much cleaner than custom date picker libraries.

9. type=”time”

Time inputs give you native time pickers.

<input type="time" name="appointment" min="09:00" max="18:00">

Perfect for scheduling forms. No more struggling with AM/PM dropdowns.

10. type=”datetime-local”

This one’s powerful: date AND time in one field.

<input type="datetime-local" name="meeting">

It combines date and time selection. Great for event registration or booking systems.

11. type=”month”

Month pickers for month/year selection.

<input type="month" name="expiry" min="2025-01">

Perfect for credit card expiry dates or monthly reports. The browser handles the calendar interface.

12. type=”week”

Week pickers let users select a specific week of the year.

<input type="week" name="week">

It’s niche, but super useful for scheduling or timesheet applications.

13. type=”color”

Color pickers built right into HTML.

<input type="color" name="theme-color" value="#4f46e5">

The browser shows a native color picker. No more importing color picker libraries for simple use cases.

14. type=”range”

Sliders for selecting values within a range.

<input type="range" name="volume" min="0" max="100" step="5" value="50">

Visual, intuitive, and perfect for settings like volume or brightness. You can customize the appearance with CSS too.

15. type=”file”

File uploads made simple.

<input type="file" name="document" accept=".pdf,.doc,.docx">

You can restrict file types with accept. Add multiple to allow multiple file selection:

<input type="file" name="photos" accept="image/*" multiple>

Essential for any upload functionality.

16. type=”checkbox”

Checkboxes for yes/no or multiple selections.

<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>

You can have multiple checkboxes with the same name for selecting multiple options. Simple, but absolutely essential.

17. type=”radio”

Radio buttons for single selections from multiple options.

<input type="radio" name="size" value="small" id="small">
<label for="small">Small</label>

<input type="radio" name="size" value="medium" id="medium">
<label for="medium">Medium</label><input type="radio" name="size" value="large" id="large">
<label for="large">Large</label>

Same name attribute groups them together.

Only one can be selected at a time.

18. type=”hidden”

Hidden inputs store data without displaying it.

<input type="hidden" name="user_id" value="12345">

Perfect for passing IDs, tokens, or other data that users don’t need to see. They’re invisible but still submitted with the form.

19. type=”submit”

Submit buttons trigger form submission.

<input type="submit" value="Sign Up">

It’s the classic way to submit forms. Though <button type="submit"> is more flexible these days.

20. type=”reset”

Reset buttons clear all form fields to their default values.

<input type="reset" value="Clear Form">

Use sparingly users rarely expect or want this.

But it’s there when you need it.

21. type=”button”

Generic buttons that don’t submit forms.

<input type="button" value="Click Me" onclick="doSomething()">

Perfect for JavaScript interactions without form submission.

Modern code usually uses <button> instead, but this works too.

22. type=”image”

Image buttons that act as submit buttons.

<input type="image" src="submit-icon.png" alt="Submit">

It submits the form AND sends the x,y coordinates of where you clicked.

Niche, but useful for image maps or creative submit buttons.

Bonus Attributes You Should Know

Here are some powerful attributes that work across multiple input types:

required: Makes the field mandatory

<input type="email" name="email" required>

placeholder: Shows hint text

<input type="text" placeholder="Enter your name">

pattern: Custom validation with regex

<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">

minlength and maxlength: Character limits

<input type="text" minlength="3" maxlength="50">

readonly: Display only, no editing

<input type="text" value="Cannot edit this" readonly>

disabled: Grays out and prevents interaction

<input type="text" value="Disabled" disabled>

autocomplete: Controls browser autofill

<input type="email" autocomplete="email">

autofocus: Focuses field on page load

<input type="text" autofocus>

list: Connects to datalist for autocomplete suggestions

<input type="text" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Modern Input Attributes (Bonus Round)

capture: Accesses camera/microphone on mobile

<input type="file" accept="image/*" capture="environment">

inputmode: Optimizes mobile keyboards

<input type="text" inputmode="numeric">

multiple: Allows multiple values (for email, file)

<input type="file" multiple>

accept: Filters file types

<input type="file" accept="image/png, image/jpeg">

The Power of Native HTML Is Here

That’s it, every HTML input type and the most important attributes that are making building forms actually fun again.

Some of them you’ll use every single day, and others are perfect for specific use cases.

Either way, they’re worth knowing inside and out, because they eliminate the need for heavy JavaScript libraries and give you better mobile experiences out of the box.

The browser does the heavy lifting. You just write better HTML.

I’ve covered all 22 input types from the basic text and password to the modern ones like datetime-local, color, and range, plus essential attributes like required, pattern, autocomplete, and mobile-specific ones like capture and inputmode.

퍼블리싱에서 종종 사용되는 기호 HTML

[python] html table을 Markdown으로 변경하기. 

htmltabletomdhtml 테이블을 마크다운으로 변환하기 위한 것입니다. 또한, 테이블 셀 내부의 내용은 HTML이 포함되어 있는 경우 마크다운으로 변환할 수 있으며, 이를 위해 라이브러리를 사용합니다 htmltomarkdown.

pip install htmltabletomd

https://pypi.org/project/htmltabletomd/

from bs4 import BeautifulSoup
from markdownify import markdownify as md
import os

def convert_html_table_to_md(html_file_path, output_md_file_path):
    # HTML 파일 읽기
    with open(html_file_path, 'r', encoding='utf-8') as file:
        html_content = file.read()

    # BeautifulSoup을 사용하여 HTML 파싱
    soup = BeautifulSoup(html_content, 'html.parser')

    # HTML을 Markdown으로 변환
    markdown_content = md(str(soup))

    # 결과를 Markdown 파일로 저장
    with open(output_md_file_path, 'w', encoding='utf-8') as file:
        file.write(markdown_content)
    
    print(f"Converted HTML table to Markdown and saved as: {output_md_file_path}")

# 사용 예시
#html_file_path = 'path_to_your_html_file.html'  # 변환할 HTML 파일 경로
html_file_path = 'test_001.html'  # 변환할 HTML 파일 경로
output_md_file_path = 'output_markdown_file.md'  # 저장할 Markdown 파일 경로

convert_html_table_to_md(html_file_path, output_md_file_path)

[HTML] sns 용 META tag

[HTML] details  summary , jquery로 open 제어

<details>

HTML <details> 요소는 "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 <summary> 요소를 통해 제공할 수 있습니다.

정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. <details> 요소의 첫 번째 자식이 <summary> 요소라면, <summary>의 콘텐츠를 위젯의 레이블로 사용합니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/details

Open 추가

$('details').attr('open','');

Opne 제거

$('details').removeAttr('open');

$('.info').on('click', 'details', function () {
    $('details').removeAttr('open');
    $(this).attr('open', '');
});

입력항목 기록 삭제, How to clear history of text input

https://www.w3schools.com/tags/att_input_autocomplete.asp

<input type="email" name="email" autocomplete="off">


<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit">
</form>

속성 autocomplete은 입력 필드에서 자동 완성을 활성화해야 하는지 여부를 지정합니다.

자동 완성을 사용하면 브라우저가 값을 예측할 수 있습니다. 사용자가 필드에 입력하기 시작하면 브라우저는 이전에 입력한 값을 기반으로 필드를 채울 수 있는 옵션을 표시해야 합니다.

참고: 속성 autocomplete은 텍스트, 검색, URL, 전화번호, 이메일, 비밀번호, 날짜 선택기, 범위 및 색상 입력 유형과 함께 작동합니다.