Forms

SQL Editor

semantic HTML

SQL 키워드, 문자열, 숫자, 주석 하이라이트를 제공하는 경량 쿼리 에디터입니다.

stablefreeSince 0.5

Live example

sql editor ready

<section class="static-editor code-editor" data-static-editor="code" data-language="sql" data-default-value="SELECT id, name
FROM users
WHERE active = true;"><div class="editor-toolbar" role="toolbar" aria-label="sql editor tools"><label>Language<select data-editor-language><option value="text">Text</option><option value="sql" selected>SQL</option><option value="python">Python</option><option value="javascript">JavaScript</option></select></label><button type="button" data-editor-action="comment">Comment</button><button type="button" data-editor-action="copy">Copy</button><button type="button" data-editor-action="reset">Reset</button></div><div class="code-editor-body"><pre class="editor-gutter" aria-hidden="true" data-editor-gutter>1</pre><div class="code-editor-surface"><pre class="editor-highlight" aria-hidden="true" data-editor-highlight></pre><textarea rows="8" spellcheck="false" wrap="off" aria-label="sql source" data-editor-input>SELECT id, name
FROM users
WHERE active = true;</textarea></div></div><output class="editor-status" data-editor-status aria-live="polite">sql editor ready</output></section>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.5`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

SQL 모드를 표시하되 편집은 textarea로 유지해 키보드, 폼 제출, required 검증이 그대로 동작합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->