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