HTML創建文本框的3種方式


我的第一個隨筆,記錄主要用來整理學習的知識點

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>標簽。但是標簽高度不會隨文本高度自動撐開,而是出現滾動條

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM