Bootstrap Form Generator

Bootstrapのフォーム作成って、慣れてない人にとっては、どうタグを書いてよいのか、何が何だかサッパリ理解不能ですよね。

そこで、GUIで簡単にHTMLコードを出力できるオンラインフォームを作ってみました。

作成済みフォーム
作成済みフォームタグコード

作成済みフォーム

作成済みフォームタグコード

追加フィールド設定

項目幅/入力フィールド幅

項目ラベル名

入力フィールド

文字列種類

標準(日、英、数字、記号) 数値メールアドレスパスワード

フィールド名
(name 属性)

ID名
(id 属性)

クラス名
(class 属性)

プレースホルダ
(placeholder 属性)

制限事項

入力必須にする (required 属性)

無効化にする (disabled 属性)

読み取り専用にする (readonly 属性)

入力長さ制限

最少

(min/minlength 属性)

最大

(max/maxlength 属性)

ステップ

(step 属性)

以下、Bootstrap独自機能

プリフィックス
(フィールド接頭文字)

使う

アイコン

文字

サフィックス
(フィールド接尾文字)

使う

アイコン

文字

フィールド名
(name 属性)

ID名
(id 属性)

クラス名
(class 属性)

プレースホルダ
(placeholder 属性)

制限事項

入力必須にする (required 属性)

無効化にする (disabled 属性)

読み取り専用にする (readonly 属性)

以下、Bootstrap独自機能

プリフィックス
(フィールド接頭文字)

使う

アイコン

文字

サフィックス
(フィールド接尾文字)

使う

アイコン

文字

フィールド名
(name 属性)

ID名
(id 属性)

クラス名
(class 属性)

制限事項

入力必須にする (required 属性)

無効化にする (disabled 属性)

複数ファイル許容する (multiple 属性)

以下、Bootstrap独自機能

プリフィックス
(フィールド接頭文字)

使う

アイコン

文字

サフィックス
(フィールド接尾文字)

使う

アイコン

文字

フィールド名
(name 属性)

ID名
(id 属性)

クラス名
(class 属性)

制限事項

入力必須にする (required 属性)

無効化にする (disabled 属性)

初期値ONにする (checked 属性)

以下、Bootstrap独自機能

配置

横並び配置 (inline 配置)

縦並び配置 (block 配置)

フィールド名
(name 属性)

ID名
(id 属性)

クラス名
(class 属性)

制限事項

入力必須にする (required 属性)

無効化にする (disabled 属性)

初期値ONにする (checked 属性)

以下、Bootstrap独自機能

配置

横並び配置 (inline 配置)

縦並び配置 (block 配置)

フィールド名
(name 属性)

ID名
(id 属性)

クラス名
(class 属性)

制限事項

入力必須にする (required 属性)

無効化にする (disabled 属性)

複数ファイル許容する (multiple 属性)

許容ファイル
(accept 属性)

※ MIME形式でファイル種別を指定。

ENTEREAL