jspで定義したプロパティをCSSに書き直したい

現在WEBアプリ作成の課題を行っており、jspでの入力フォームなどを作っています。
基本的な部分は完成しているのですがjspで用意した画面項目のプロパティ(最大文字数やテキストボックスの長さ)はCssで定義するようにと言われ書き直さなくていけなくなったのですが、CSSはほとんど使ってなかったので定義の仕方がいまいちわからないです。
現状以下のようにjsp上で定義している内容をCSSに移すにはどのようにすればよろしいでしょうか？

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 画面に合わせたサイズ表示に -->
<title>課題</title>
<link rel="stylesheet" href="./res/css/loginCss.css">
<!-- css読み込み -->
</head>
<body>

	<h1>社員管理システム</h1>
	<form action="./Login" method="post">
		<c:if test="${errorMsg != null}">
			<c:out value="${errorMsg}" />
		</c:if><br> 
		ログインID<input type="text" name="loginId" size="20"
			maxlength="20"><br>
		<!-- size:入力枠の大きさ maxlength:入力できる文字数 -->
		パスワード<input type="password" name="loginPassword" size="20"
			maxlength="20"><br><input type="submit"
			value="ログイン" />
	</form>
</body>
</html>

結構急いでるのでどれか一つ例文を乗せてもらえると助かります。

どうぞよろしくお願いします。

kei344

2016/07/10 04:18

./res/css/loginCss.css の中身を追記いただけませんか？

manmos

2016/07/10 05:48

CSSはまだ中に何も書いていない状態です。最大文字数の指定とかやり方すらわかっていないので・・・

行動規範の内容に同意します

回答2件

単純に幅を指定したいのであればCSSは

    input.input-login-id {
      width: 200px;
    }
    input.password {
      width: 200px;
    }

とし、フォームにの要素にclass属性を追加すれば良いと思います。

<form action="./Login" method="post">
  ログインID<input type="text" name="loginId" size="20" class="input-login-id"
               maxlength="20"><br>
  <!-- size:入力枠の大きさ maxlength:入力できる文字数 -->
  パスワード<input type="password" name="loginPassword" size="20" class="password"
              maxlength="20"><br><input type="submit"
                                        value="ログイン" />
</form>

見たところ社内ツールの管理画面のようですので、bootstrapなどを使ってデザインに余計な手間を取られないような方法の検討をおすすめします。

投稿2016/07/09 20:36