在没有css的情况下对齐HTML中的输入字段答案

【问题标题】：Align Input fields in HTML without css在没有css的情况下对齐HTML中的输入字段
【发布时间】：2015-06-10 10:36:28
【问题描述】：

试图让我的 html 的输入字段与其他输入字段对齐。

有没有办法在不使用 CSS 的情况下使其对齐？

这就是我所拥有的：姓名：|-----输入--------|

密码：|-----输入-----|

确认密码：|-----输入-----|

电子邮件：|-----输入-----|

电话：|-----输入-----|

试着把它变成这样：

姓名：.....................|-----输入-----|

密码：........|-----输入-----|

确认密码：|-----输入-----|

电子邮件：.....................|-----输入------|

电话：........|-----输入-------|

（不带点）

代码：

<form>
    <label>Name:</label>
    <input type="text" name="namefield" align="center"> <br /> 
    <label><br>Password: </label>
    <input type="password" name="pwdfield"> <br /> 
    <label><br>Confirm password: </label>
    <input type="password" name="cpwdfield"> <br />
    <label><br>Email: </label>
    <input type="email" name="email"> <br /> 
    <label><br>Phone: </label> 
    <input type="tel" name="phone"> <br />
    <br>
    <input type="submit" value="Register" />
</form>

【问题讨论】：

你可以使用<table />
w3schools.com/html/html_tables.asp。使用表格

标签： html input

【解决方案1】：

使用不带边框的表格标签可以在不使用 css 的情况下对齐文本框。

<FORM>    
<TABLE frame="box">
  <TR><TD>Your name</TD>        <TD><INPUT TYPE="TEXT" NAME="name" SIZE="25"></TD>      </TR>
  <TR><TD>Password</TD>         <TD><INPUT TYPE="TEXT" NAME="pwdfield" SIZE="25"></TD>  </TR>
  <TR><TD>Confirm password</TD> <TD><INPUT TYPE="TEXT" NAME="cpwdfield" SIZE="25"></TD> </TR>  
  <TR><TD>E-mail</TD>           <TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD>     </TR>
  <TR><TD>Phone</TD>            <TD><INPUT TYPE="TEXT" NAME="phone" SIZE="25"></TD>     </TR>  
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Register" NAME="B1"></P>
</FORM>

【讨论】：

【解决方案2】：

你可以用 div 或 label 来做。我将向您展示如何使用标签。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>TableLess Form</TITLE>
  <META name="Author" Content="Bit Repository">

  <META name="Keywords" Content="form, divs">
  <META name="Description" Content="A CSS Tableless Form Design">

<link rel="stylesheet" type="text/css" href="style.css" />

</HEAD>

 <BODY>

<center>

<div align="left" style="width: 500px;">

<form name="register" method="post" action="">
<fieldset><legend>Member Registration</legend>

<label>Username</label><input type="text" name="name"><br />

<label>E-Mail</label><input type="text" name="email"><br />

<label>Password</label><input type="password" name="password"><br />

<label>Confirm password</label><input type="password" name="confirm_password"><br />

<label>Comments (optional)</label><textarea name="message" rows="5" cols="25"></textarea><br />

<label>&nbsp;</label><input type="checkbox" name="i_agree" value="1">I agree to the terms & conditions<br />

<label>&nbsp;</label><input type="submit" name="submit" value="Send Message"><br />

</center>

</fieldset>

</form>

</div>

 </BODY>
</HTML>

Style.css

HTML, BODY
{
padding: 0;
border: 0px none;
}

/* Let's add some style to our fieldset & legend */

fieldset
{
-moz-border-radius: 7px;
border: 1px #dddddd solid;
padding: 10px;
width: 550px;
margin-top: 10px;
}

fieldset legend
{
border: 1px #1a6f93 solid;
color: black;

font-family: Verdana;
font-weight: none;
font-size: 13px;

padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;

-moz-border-radius: 3px;
}

/* Label */
label
{
width: 140px;
padding-left: 20px;
margin: 5px;
float: left;
text-align: left;
}

/* Input, Textarea */
input, textarea
{
margin: 5px;
padding: 0px;
float: left;
}

/* BR */

br
{
clear: left;
}

希望对你有所帮助。

【讨论】：

这就是我要找的。谢谢
问题是“没有 CSS”。