接下來我們寫個性簽名和密碼輸入框。
多行輸入框
個性簽名是個多行輸入框。當多行文本輸入框中輸入的內容超過一行的長度時,它會自動換行,而單行文本輸入框不會換行。
這里我們會用到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>