接下来我们写个性签名和密码输入框。
多行输入框
个性签名是个多行输入框。当多行文本输入框中输入的内容超过一行的长度时,它会自动换行,而单行文本输入框不会换行。
这里我们会用到textarea标签来写多行输入框。
<!-- name属性表示表单元素的名称,placeholder属性表示表单元素的占位文本 --> <textarea name="sign" rows="5" cols="30" placeholder="请输入个性签名" ></textarea>
rows:行数(高度) cols:文本域可视宽度。这两个属性可写可不写,<textarea></textarea>就能表示一个多行输入框。
密码输入框
密码输入框和昵称输入框有点区别,用户输入的内容会以黑圆点的形式显示。
如何做到输入内容不直接显示呢?只需要把表单标签<input>中的type="text"改成type="password"就可以了
<!-- type属性表示表单元素的类型,name属性表示表单元素的名称,placeholder属性表示表单元素的占位文本 --> <input type="password" name="password" placeholder="密码" />
例:写一个密码输入框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>编程题</title> </head> <body> <!-- 实现一个密码输入框 --> <form action="https://www.youkeda.com/"> <input type="password" name="password" placeholder="请填写密码"/> </form> </body> </html>