会員登録用のHTMLを簡単に作った

10:00時から仕事をしなければいけないので朝の時間を使って少しづつ会員登録機能を作っていきたいと思っている。昨晩、会員登録に必要な要件定義をしたブログをアップしたので、今回から着実に実装に入っていきたい。ちなみに、本当に少しづつしか進まないんで、こまめにあげて、出来上がったらまとめもあげたいと思う。

まずは、会員登録に必要なページを簡単に作ってみた。言語はHTML5です。さくらvpsに入って直接サーバーの中でベタ書きしてます。今までテキストエディタっていったらXcode(僕が一番使える言語がSwiftなので)とかAtomとか(カスタマイズはほぼしてない)しか使ってこなかったので、Vimって超使いづらいなっておもってるんだけど、多分使いこなせれば使いやすくなるはず。この際、Vimの使い方も本格的に覚えていっちゃおう。とりあえず、まずhtmlは下記のような感じで作った。

<form action=="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="password">password:</label>
        <input type="password" id="password" />
    </div>
    <div>
        <label for="password">確認用password:</label>
        <input type="password" id="check-password" />
    </div>

    <div>
        <button type="submit">登録</button>
   </div>
</form>

動作確認は良好だ。この次は、サブミットを押したら、データがphpに飛ぶうよにして、データベースへの接続までやりたいな!!

 

そして今回htmlを生成するのに使ったVimコマンド、コピペするときに勝手に改行するのを防止するコマンドと複数行を選択してコピーするコマンド。それから、vimのテキストの行数を表示するコマンドと非表示にするコマンド。テキストでノーマルモードでdを押すとその行を削除できることを知った。また、bを押せば一個前のテキストに戻れる。wを押せば次の単語にジャンプできる。便利!でも、これコマンド暗記できないな。どーやって簡単な自分は覚えられるような単語で使えるようにしようか?

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

未整理記事