我的第一個隨筆,記錄主要用來整理學習的知識點
1.input 創建單行文本框
<input type="text" size="10" maxlength="30" value="text1">
size :指定文本框中能夠顯示的字符數。
value:設置文本框的初始值
maxlength :指定文本框可以接收的最大字符數
type="text":是定義單行的輸入字段,用戶可在其中輸入文本。默認寬度為20個字符
2.<textarea>創建多行文本框
<textarea cols="25" rows="5">text2</textarea>
<textarea>是多行文本框,需要指定文本框的大小。
rows:指定的是文本框的字符行數。
cols:指定的是文本框的字符列數。
input 和<textarea>不同之處
1.<textarea>多行顯示字符串。input只能單行顯示
2.<textarea>的初始值必須要放在<textarea>和</textarea>之間
3.input是單標簽 ,<textarea>是閉合標簽
4.<textarea>的值是純文本;<input>的值根據類型不同而不同;
3.div 模擬textarea
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML創建文本框的3種方式</title>
<style>
.test3{
border:1px solid #a0b3d6;/*設置邊框1px,實線,邊框線色為#a0b3d6 */
width: 500px;
min-height: 200px;
font-size: 14px;
padding: 4px;
color: #333;
outline:0; /* 當元素獲得焦點的時候,焦點框為0.去掉虛線框(或高亮框)*/
}
/* 當輸入框為空時,顯示默認文字 */
.test3:empty::before{
content:attr(placeholder); /*獲取屬性的值 attr(value),可以獲得屬性值 */
color: #999;
}
</style>
</head>
<body>
<div class="test3" contenteditable="true" placeholder="請輸入內容..."></div>
</body>
</html>
contentEditable='true': ture設置為可編輯文本內容, false為不可編輯
contenteditable="true"復制粘貼的時候不能過濾html標簽;
div 和 textare文本框的不同之處
1.div可以使標簽高度隨着文本內容高度自動撐開。使用<textarea>標簽。但是標簽高度不會隨文本高度自動撐開,而是出現滾動條