HTML多行文本输入框和密码输入框


接下来我们写个性签名和密码输入框。

多行输入框

  个性签名是个多行输入框。当多行文本输入框中输入的内容超过一行的长度时,它会自动换行,而单行文本输入框不会换行。

  这里我们会用到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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM