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

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

新規登録して質問してみよう
ただいま回答率
85.35%
ウェブアプリケーション

ウェブアプリケーションとは、ウェブ上でアクセスされるアプリケーションのことを呼びます。この場合におけるウェブとは、インターネットやイントラネット上を意味します。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

HTML

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

1352閲覧

ログイン画面の作成:html、css

daisukekubota

総合スコア33

ウェブアプリケーション

ウェブアプリケーションとは、ウェブ上でアクセスされるアプリケーションのことを呼びます。この場合におけるウェブとは、インターネットやイントラネット上を意味します。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

HTML

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

1クリップ

投稿2020/03/09 07:50

ウェブアプリケーション作成につき、ログイン画面を作成しようとしているのですがうまく起動しません。
どこが間違っていて、どう直せばいいのか親切な方教えていただけないでしょうか。
よろしくお願いいたします。ファイル名はindex.htmlとmain.cssにしてあります。

html

1<div class="form-wrapper"> 2 <h1>Sign In</h1> 3 <form> 4 <div class="form-item"> 5 <label for="email"></label> 6 <input type="email" name="email" required="required" placeholder="Email Address"></input> 7 </div> 8 <div class="form-item"> 9 <label for="password"></label> 10 <input type="password" name="password" required="required" placeholder="Password"></input> 11 </div> 12 <div class="button-panel"> 13 <input type="submit" class="button" title="Sign In" value="Sign In"></input> 14 </div> 15 </form> 16 <div class="form-footer"> 17 <p><a href="#">Create an account</a></p> 18 <p><a href="#">Forgot password?</a></p> 19 </div> 20</div>

css

1* Fonts */ 2@import url(https://fonts.googleapis.com/css?family=Open+Sans:400); 3 4/* fontawesome */ 5@import url(http://weloveiconfonts.com/api/?family=fontawesome); 6[class*="fontawesome-"]:before { 7 font-family: 'FontAwesome', sans-serif; 8} 9 10/* Simple Reset */ 11* { margin: 0; padding: 0; box-sizing: border-box; } 12 13/* body */ 14body { 15 background: #e9e9e9; 16 color: #5e5e5e; 17 font: 400 87.5%/1.5em 'Open Sans', sans-serif; 18} 19 20/* Form Layout */ 21.form-wrapper { 22 background: #fafafa; 23 margin: 3em auto; 24 padding: 0 1em; 25 max-width: 370px; 26} 27 28h1 { 29 text-align: center; 30 padding: 1em 0; 31} 32 33form { 34 padding: 0 1.5em; 35} 36 37.form-item { 38 margin-bottom: 0.75em; 39 width: 100%; 40} 41 42.form-item input { 43 background: #fafafa; 44 border: none; 45 border-bottom: 2px solid #e9e9e9; 46 color: #666; 47 font-family: 'Open Sans', sans-serif; 48 font-size: 1em; 49 height: 50px; 50 transition: border-color 0.3s; 51 width: 100%; 52} 53 54.form-item input:focus { 55 border-bottom: 2px solid #c0c0c0; 56 outline: none; 57} 58 59.button-panel { 60 margin: 2em 0 0; 61 width: 100%; 62} 63 64.button-panel .button { 65 background: #f16272; 66 border: none; 67 color: #fff; 68 cursor: pointer; 69 height: 50px; 70 font-family: 'Open Sans', sans-serif; 71 font-size: 1.2em; 72 letter-spacing: 0.05em; 73 text-align: center; 74 text-transform: uppercase; 75 transition: background 0.3s ease-in-out; 76 width: 100%; 77} 78 79.button:hover { 80 background: #ee3e52; 81} 82 83.form-footer { 84 font-size: 1em; 85 padding: 2em 0; 86 text-align: center; 87} 88 89.form-footer a { 90 color: #8c8c8c; 91 text-decoration: none; 92 transition: border-color 0.3s; 93} 94 95.form-footer a:hover { 96 border-bottom: 1px dotted #8c8c8c; 97}

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

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

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

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

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

m.ts10806

2020/03/09 08:06

「間違い」かどうかを判断できるのが質問者さんしかないのでしたら、それは赤の他人には手が出せないということになります。 タイトル、内容を調整し、ゴールを明示してください。
m.ts10806

2020/03/09 08:07

そして「うまく起動しない」では誰にも何も伝えてません。 起こっている現象を感覚ではなく事実ベースで具体的に記載いただけますか?
guest

回答1

0

ベストアンサー

ログインをする、ということはサーバとの通信をするのだと思いますが、Ajaxを使うのでなければ、form要素の属性が足りないのではないでしょうか。

action | <form> - HTML: HyperText Markup Language | MDN
method | <form> - HTML: HyperText Markup Language | MDN

index.html にGETリクエストでログインしている、ということなのかもしれませんが、それはそれでパスワード丸見えで危険です。

投稿2020/03/09 10:15

Lhankor_Mhy

総合スコア36960

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問