### [フォームフィールド入力の先頭文字を大文字にする方法](https://wpforms.com/developers/how-to-capitalize-form-field-inputs/) **公開日:** 2021年6月9日 **著者:** エディトリアルチーム **抜粋:** このチュートリアルでは、CSSとJavaScriptを使用して、フィールドが完了するにつれて動的に大文字に変換されるテキストを適用する方法を説明します。 **コンテンツ:** ## はじめに WPFormsでフォームフィールドの入力の先頭文字を大文字にしたいですか？ CSSと**text-transform**を使用して入力値をフォーマットすることは簡単にできますが、入力されたとおりにエントリが保存されます。短いJavaScriptスニペットを使用すると、リアルタイムで、これらの値が大文字で表示および保存されることを保証できます。 このチュートリアルでは、これを達成するための各ステップを説明します。 ## フォームの作成 まず、フォームを作成する必要があります。このチュートリアルでは、フォームに**段落テキスト**と**一行テキスト**のフォームフィールドを追加しました。 フォームの作成についてサポートが必要な場合は、[こちらのドキュメントをご覧ください](https://wpforms.com/docs/creating-first-form/ "最初のフォームの作成")。 ## CSSクラス名の追加 次に、これらの各フォームフィールドにCSSクラスを使用して、別のステップで追加する**text-transform** CSSルールを使用するようにCSSをトリガーします。必要なCSSクラスを追加するには、フォームビルダーで**一行テキスト**フィールドをクリックし、次に**詳細設定**をクリックして開きます。 **CSSクラス**の下に**capitalize**を追加し、**段落テキスト**フィールドにも同様の手順を繰り返します。 ## 実装オプション ### CSSのみを使用する（オプション） このカスタムCSSは、フォームフィールドが表示上大文字になることを意味しますが、エントリには入力されたとおりのフィールド値が表示されます。 カスタムCSSの追加方法と場所についてサポートが必要な場合は、[こちらのチュートリアルをご覧ください](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "WPFormsのカスタムCSSスタイルの追加方法")。 このCSSをコピーしてサイトに貼り付けてください。 ``` .capitalize { text-transform: capitalize; } ``` `text-transform`のCSSプロパティで他に何が使用できるかを確認したい場合は、[Mozillaのドキュメントをご覧ください](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)。 ### JavaScriptのみを使用する（推奨） フォームが完了するにつれてフォームフィールドの入力値の先頭文字を大文字にし、エントリ情報が大文字で保存されるようにするために、テキストが入力されるとすぐにフィールドを大文字にする短いスクリプトを追加します。 サイトにJavaScriptを追加する方法については、[こちらのチュートリアルをご覧ください](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "WPFormsのカスタムPHPまたはJavaScriptの追加方法")。 ``` /* * フォームフィールドテキストの先頭文字を大文字にする * * @link https://wpforms.com/developers/how-to-capitalize-form-field-inputs/ */ function wpf_dev_capitalize() { ?> **カテゴリ:** チュートリアル **タグ:** CSS, Javascript, JS, PHP ---