フォーム入力内容を画面に表示させる方法

# はじめに
フォームにテキストを入力して送信後、入力内容を画面に表示させる方法をまとめました。
ご参考になれば幸いです！！！
# 実装コード&結果
今回のメインはJavaScriptなので、htmlの記述は簡易に書いています。
ご了承くださいm(_ _)m

``` index.html
<!doctype html>
<html lang="ja">
<header>
<meta charset="UTF-8">
<title>テスト</title>
</header>
<body>
    <main>
        <!-- 入力フォーム -->
        <form action="#" id="form">
            <input type="text" name="content">
            <input type="submit" value="送信">
        </form>
        <!-- 入力結果を出力 -->
        <p id="output"></p>
    </main>
</body>
<!-- 以下JavaScriptを記述 -->
<script>
    // submit時にイベント実行をする関数
    document.getElementById('form').onsubmit = function (event) {
        // 再読み込み防止
        event.preventDefault();
        // 入力フォームの内容を取得
        let inputForm = document.getElementById('form').content.value;
		// 入力内容を画面に出力
        document.getElementById('output').textContent = `${inputForm}`;
    }
</script>
</html>
```
<br>

フォーム入力後に送信ボタンをクリックすると、入力内容がその下に表示されます。
![スクリーンショット 2022-07-17 18.13.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521366/17173a72-686f-6fd7-f4e3-88b304a925f1.png)

# 1. 入力フォームの説明
`action`で送信先のURLを設定しており、今回は同じページを再表示させるので`action=’#’`とします。
`id="form”`でid名の設定を行います。
後に説明する`getElementById()`にid名を指定することでform要素を取得します。

```html
<form action="#" id="form>　 〜 </form>
```
`type=”text”`とすることで入力フォームとして設定します。
`name=”content”`でname属性を設定し、これによってデータ送信時の内容に「名前」をつけています。

```html
<input type="text" name="content">
```
`type=”submit”`とすることで、送信ボタンとして設定します。
`value=”送信”`で、ボタンに表記する名前を設定しています。
```html
<input type="submit" value="送信">
```

フォーム入力後に送信された内容を表示するための`pタグ`です。
```html
<p id="output"></p>
```

# 2.入力内容取得処理の説明(JS)
`document.getElementById(’form’)`で`form`を指定することで、form要素を取得します。
`onsubmit`イベントにより送信ボタンが押された時、function内の処理を実行させます。
確認ですが、送信ボタンとは`<input type="submit" value="送信">`になります。
```javascript
document.getElementById("form").onsubmit = function (event) { };
```
通常、フォームの内容を指定したURLへ送信する動作をデフォルトで行います。
このデフォルト動作を`event.preventDefault()`によってキャンセルします。
キャンセルを行わないと、再読み込みが実行されるので取得した入力内容が消えてしまいます。
それを防ぐためにコードを記述します。

```javascript
event.preventDefault();
```
`document.getElementById('form')`にてform要素を取得します。
`document.getElementById('form').content`の`content`で入力フォームの`入力内容`を取得します。
`content`自体は、入力フォーム`<input type="text" name="content">`の`name=”content”`に該当します。
そして入力内容を変数`inputForm`に格納しています。
```javascript
let inputForm = document.getElementById('form').content.value;
```
`document.getElementById('output')`で入力内容を表示させるpタグ`<p id="output"></p>`の要素を取得しています。
`textContent`でpタグ要素の内容(プロパティの値）を読み取ります。
そして入力内容が格納されている$inputFormを使って`=${inputForm}`とすることでpタグのプロパティ値を書き換えています。
これによって画面に入力内容が表示されます。

```javascript
document.getElementById('output').textContent = `${inputForm}`;
```
# こんな感じです
実装した内容は、下記のような感じです。
入力内容が画面に出力されますので、よければ触ってみてください。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poLRdBK" data-user="k_mitani" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/k_mitani/pen/poLRdBK">
  Untitled</a> by Kenta Mitani (<a href="https://codepen.io/k_mitani">@k_mitani</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# おわり
今回は入力して送信を行った内容を画面に出力させる内容でした。
JavaScriptについて学習中なので、また記事をまとめようと思います。
ここまで読んで頂きありがとうございました。

# 参考サイト&本
【JavaScript】event.preventDefault()が何をするのか
[https://qiita.com/yokoto/items/27c56ebc4b818167ef9e](https://qiita.com/yokoto/items/27c56ebc4b818167ef9e)
確かな力が身につくJavaScript「超」入門 第2版
https://www.sbcr.jp/product/4815601577/