Для начала позвольте мне сказать, что я НЕ веб-разработчик.Я больше работаю над встроенными вещами.Я совершенно не осведомлен о стандартах веб-дизайна или распространенных практиках.Любая помощь с благодарностью.
То, что я пытаюсь сделать
Создать форму с несколькими рядами флажков / выпадающих / текстовых полей, что невероятно простоинтуитивно понятный в эксплуатации.Он должен быть полностью совместим с IE 6+.Любые другие браузеры не являются обязательными (это собственное решение, которое будет просматриваться только в IE).
То, что я пытался сделать, - это создать еще один столбец флажков, которые выровнены, как текущий набор.* Мой код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
.right_div_check_boxes { width:70%;float:right;} <!-- 75% -->
.left_div_input_boxes {width:15%;float:left;} <!--15%-->
</style>
<div class="left_div_input_boxes" style="position:relative">
<form>
<label>Submitted by (First Name)</label>
<input type="text" style="width:150px" name="firstname" /><br>
<label>Submitted by (Last Name)</label><br>
<input type="text" name="lastname"/>
<label>Employee Number</label><br>
<input type="text" name="employnum"/>
<form>
<label>What</label>
<select style="width:150px" name="observer">
<option value="other">TEST</option>
<option value="other">TEST</option>
<option value="other">TEST</option>
</select>
<label>Who</label>
<form action="">
<select style="width:150px" name="who">
<option value="other">TEST</option>
<option value="other">TEST</option>
<option value="other">TEST</option>
</select>
<label>Operation Code</label>
<select style="width:150px" name="opcode">
<option value="other">TEST</option>
<option value="other">TEST</option>
</select>
<label>Center</label>
<select style="width:150px" name="cost">
<option value="Zone 1"> Zone 1 </option>
<option value="Zone 2"> Zone 2 </option>
<option value="Zone 3"> Zone 3 </option>
</select>
</form>
</div>
<div class="right_div_check_boxes" style="position:relative">
<label>Dangers</label>
<form>
<input type="checkbox" name="vehicle" value="Bike" />Line of Fire<br />
<input type="checkbox" name="vehicle" value="Car" />Respirtory Protection<br />
<input type="checkbox" name="vehicle" value="Car" />Ears/Hearing Protection<br />
<input type="checkbox" name="vehicle" value="Car" />Eye/Face Protection<br />
</div>
<br />
</head>
<body>
</body>
</html>