代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>常用表单控件</title>
<style>
form {width: 260px;margin: 0 auto;border: 1px solid #ccc;padding: 20px;
}
.right {float: right;
}
</style>
</head><body>
<form action="#" method="post">用户名:<input class="right" type="text" value="张三" maxlength="6" /><br><br>密码:<input class="right" type="password" />
</form>
</body>
</html>
上述代码中:
第7~12行代码定义form的样式;
第13~15行代码定义input右浮动的样式;
第20~27行代码表单结构,其中,第22行代码定义用户名输入框,第26行代码定义密码输入框,即type的值为password。
运行效果
用户名“张三”是通过< input >标签的value属性设置的,密码自动隐藏。