質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

35915閲覧

テキストエリアに入力した文字を保存するには、どうすればいいのか?

退会済みユーザー

退会済みユーザー

総合スコア0

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/07/05 05:52

編集2017/07/05 07:32

###実現したいこと

htmlとcssで、web上でテキストエリアに入力された文字を保存して、特定の文字が入力されたら
その文字について詳細なページを表示するシステムを作っています。

現在、テキストエリアに文字を入力するプログラムは完成しています。
しかし、その入力した文字をどうやって保存したらいいのか分かりません。

調べてみたのですが、知りたい情報がなかなか見つかりませんでした。
何の言語の、どのような処理を使えば、このような処理を作れるか教えていただけないでしょうか?
よろしくお願いします。

###現在、出来ているソースコード

html

1<!DOCTYPE html> 2<html lang = “ja”> 3<head> 4 <meta charset = “UFT-8”> 5 <title>買い物プラス</title> 6 <link href="css/style.css" rel="stylesheet"> 7</head> 8 9<body> 10 <div class="container"> 11 <textarea id="comment" placeholder="買い物したい食材をメモしてください"></textarea> 12 <div class="btn">保存</div> 13 </div> 14</body> 15</html>

CSS

1@charset "UTF-8"; 2 3body{ 4 font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; 5 font-size: 16px; 6 7} 8 9.container{ 10 width:400px; 11 margin: 30px auto; 12} 13 14textarea{ 15 width: 400px; 16 box-sizing: border-box; 17 height: 200px; 18 padding: 10px; 19 font-size: 16px; 20 margin-bottom: 15px; 21 line-height: 1.5; 22} 23 24textarea:focus{ 25 outline: none; 26} 27 28.btn{ 29 display: inline-block; 30 width: 150px; 31 background: #00aaff; 32 padding: 5px; 33 color: #fff; 34 border-radius: 5px; 35 text-align: center; 36 cursor: pointer; 37 box-shadow: 0 4px 0 #0088cc; 38 float: right; 39} 40

###試したこと
自分がやりたいプログラムに近い物はないか、ドットインストールで探したり「テキストエリア 保存」などのキーワードで探しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2017/07/05 07:00

ところどころ全角の引用符「“」「”」が現れていますが大丈夫でしょうか?
退会済みユーザー

退会済みユーザー

2017/07/05 07:02

うまく動いていたので気づきませんでした。すぐ、半角に直します。ありがとうございます。
kei344

2017/07/05 07:11

質問タイトルの「タイトルエリア」は「テキストエリア」でしょうか。
退会済みユーザー

退会済みユーザー

2017/07/05 07:31

タイトルに入力した文字が間違っていました。すぐ、直します。テキストエリアです。ありがとうございます。
guest

回答2

0

サーバーに保存するのであれば、クライアントから情報を送らなければなりません。
form / submit / post などで検索するといろいろと出てくると思います。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/form
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

あるいは、ちょっとした文字列をクライアントだけで保持するならcookieでいいかもしれません。
https://developer.mozilla.org/ja/docs/Web/API/Document/cookie

クッキーの使用方法
http://so-zou.jp/web-app/tech/programming/javascript/cookie/

投稿2017/07/05 07:09

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/07/05 08:39

回答ありがとうございます。 ちょっとした文字列が保存出来たらいいので、cookieを使う方法を勉強してみます。
guest

0

ベストアンサー

ブラウザだけでデータを保存するなら。

【html5のlocalStorageで複数のデータを保存するには? | Web.fla】
http://the-zombis.sakura.ne.jp/wp/blog/2012/05/12/post-1362/

【localStorageで複数のデータを保存する | Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post5978.html

※ 入力内容はブラウザにのみ保存されるので、入力内容を他人と共有したければサーバが必要になります。

投稿2017/07/05 08:11

kei344

総合スコア69355

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/07/05 08:43

回答ありがとうございます。 作りたいものに、すごく近かったので教えてくださったサイトを参考にしたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問