HTMLとCSSを用いた作業ログインフォームの作成(第1報)

7536 ワード
css opensource tutorial devops テキストリンク
こんにちは、読者と私の新しいブログへようこそ、今日、私はどのように作業ログインを作成し、HTML、CSSでフォームをサインアップする方法を伝えるつもりです.多くの種類のログインを見て、フォームにサインアップしてください、しかし、これは透明です.ログインフォームは、制限されたページまたはフォームにアクセスする認証資格情報を入力するために使用されます.ログインフォームには、ユーザー名とパスワードのフィールドが含まれます.ログインフォームが送信されると、基になるコードは資格情報が本物であることを確認し、制限されたページにアクセスできます.
あなたが知っているように、サインアップフォームはどんなウェブサイトの不可欠な部分です.お客様のビジネスの性質に応じて、サインを生成するためのフォームを使用して、ニュースレターの電子メールを収集し、新しい顧客を取得することができます.サインアップフォームは、許可ベースの、従事した加入者のリストを成長する際に不可欠です.
このログインをしてフォームにサインアップするコードが欲しい場合は、このブログを読んで、ログインのプレビューを見て、下記のリンクを使ってフォームに登録してください.

ビデオプレビュー

閉じるこの動画はお気に入りから削除されています.
また、最新の更新プログラムを取得する私のチャネルを購読することができます.
🔗 リンク
私の友人のチャンネルを購読してください
My second channel Relaxing sounds and music

HTML
ハイパーテキストマークアップ言語を知っているか、HTMLはWebブラウザで表示されるように設計されたドキュメントの標準的なマークアップ言語です.これは、カスケードスタイルシート(CSS)やスクリプト言語などのJavaScriptなどの技術によって支援することができます.
ウェブブラウザは、HTMLサーバをWebサーバから、またはローカルストレージから受け取り、ドキュメントをマルチメディアWebページにレンダリングします.HTMLはWebページの構造を意味的に記述し、元々はドキュメントの外観のためのキューを含んでいます.
HTML要素はHTMLページのビルディングブロックです.HTML構造では、画像やその他のオブジェクトなどの対話型フォームをレンダリングページに埋め込むことができます.HTMLは、見出し、段落、リスト、リンク、引用符および他のアイテムのようなテキストのための構造的意味論を意味することによって構造化されたドキュメントをつくる手段を提供する.HTML要素は、角括弧で書かれたタグによって描写されます.このようなタグはページに直接コンテンツを紹介します.その他のタグ
ドキュメントテキストに関する情報を取り囲んで提供し、サブエレメントとして他のタグを含めることができます.ブラウザはHTMLタグを表示しませんが、ページの内容を解釈するために使用します.

ソースコード

今すぐ時間を無駄にしないでください.

注意!間違いを間違って結果を生成することができますタイピングすべてを読んでください.

ステップ1
インデックスという名前のファイルを作成します.HTMLと次のコードを書きます.
CSSにリンクする基本コード.
<!DOCTYPE html>
<!-- Created By Codeflix -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Transparent Login Form HTML CSS</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>

ステップ2
ここでは背景画像を追加します.画像をダウンロードします🔗 私のビデオプレビューのリンク.
    <div class="bg-img">

ステップ3
このコードは、フォームのログです.
      <div class="content">
        <header>Login Form</header>
        <form action="#">
          <div class="field">
            <span class="fa fa-user"></span>
            <input type="text" required placeholder="Email or Phone">
          </div>
          <div class="field space">
            <span class="fa fa-lock"></span>
            <input type="password" class="pass-key" required placeholder="Password">
            <span class="show">SHOW</span>
          </div>

ステップ4
あとでブログでリセットパスワードを作ります.

        <div class="pass">
            <a href="index 2.html">Forgot Password?</a>
          </div>

ステップ5
このコードはログインボタンです.
 <div class="field">
<input type="submit"value="LOGIN">
          </div>
        </form>

ステップ6
このコードは次のセクションにあります.
    <div class="login">Or login with</div>
        <div class="links">
          <div class="google">
            <i class="fab fa-google"><span>Google</span></i>
          </div>
          <div class="facebook">
            <i class="fab fa-facebook-f"><span>Facebook</span></i>
          </div>
        </div>

ステップ7
あとでこのブログでサインアップページを作ります.
<div class="signup">Don't have account? 
<a href="index{signup}.html">Signup Now</a>
        </div>
      </div>
    </div>

ジャバスクリプト
JavaScriptは、しばしばJSと略されて、ECMAScript仕様に従うプログラミング言語です.JavaScriptは高レベルであり、しばしばコンパイル時とマルチパラダイムにある.これは、カーリーブラケット構文、動的な入力、プロトタイプベースのオブジェクト指向と一流の関数を持っています.
HTMLとCSSと並んで、JavaScriptはワールドワイドウェブの中心技術の一つです.ウェブサイトの97 %以上が、ウェブページの振る舞いのためにクライアントサイドを使用します.ほとんどのWebブラウザは、ユーザーのデバイス上のコードを実行する専用のJavaScriptエンジンを持っています.
マルチパラダイム言語として、JavaScriptは、イベント駆動型、機能的、命令型プログラミングスタイルをサポートします.これは、テキスト、日付、正規表現、標準的なデータ構造、およびドキュメントオブジェクトモデル(DOM)で動作するためのアプリケーションプログラミングインターフェイス(API)を持っています.
ECMAScript標準には、ネットワーク、ストレージ、グラフィックスなどの入出力(I/O)は含まれません.実際には、Webブラウザや他のランタイムシステムは、I/OのJavaScript APIを提供しています.JavaScriptエンジンはもともとWebブラウザでのみ使用されていたが、彼らは現在、他のソフトウェアシステムのコアコンポーネント、特にサーバーと様々なアプリケーションです.
JavaScriptとJavaの間には、言語名、構文、およびそれぞれの標準ライブラリを含む類似点がありますが
デザイン.

スクリプトソースコード

(注意深く読む)指示
スクリプトをindexで書きます.HTMLを使う
タグ.また、スクリプトを作ることができます.あなたが望むならば、JSファイル🔗 リンク.

ソースコード

ステップ1
このコードは、パスワードフィールド、スタイルの表示オプションを非表示にします.
また、インデックスの終了タグも含まれます.HTML、より多くを知っている指示を読んでください.(上).
  const pass_field = document.querySelector('.pass-key');
  const showBtn = document.querySelector('.show');
  showBtn.addEventListener('click', function(){
   if(pass_field.type === "password"){
     pass_field.type = "text";
     showBtn.textContent = "HIDE";
     showBtn.style.color = "#3498db";
   }else{
     pass_field.type = "password";
     showBtn.textContent = "SHOW";
     showBtn.style.color = "#222";
   }
  });
データ分析と可視化
Ubuntu GNOME 17.04: Wi-Fi が機能しない — MAC アドレスが変わり続ける!