「HTML」表單

  • 表單
  • input 控件
  • label標(biāo)簽
  • textarea控件(文本域)
  • select下拉菜單
  • form表單域
  • HTML5新表單屬性
    • autocomplete(自動(dòng)完成)
    • autofocus(獲取焦點(diǎn))
    • form(表單關(guān)聯(lián))
    • multiple(多選)
    • placeholder(占位提示)
  • 新的表單元素
    • datalist
    • keygen
    • output
  • input的新type屬性介紹
    • input表單驗(yàn)證
    • w3cSchool 查閱位置
    • email標(biāo)簽
    • required屬性
    • pattern 自定義驗(yàn)證規(guī)則
    • 自定義驗(yàn)證信息
    • 小結(jié)

表單

在HTML中魁衙，一個(gè)完整的表單通常由表單控件（也稱為表單元素）说贝、提示信息和表單域3個(gè)部分構(gòu)成剧劝。

表單.png

表單控件： 包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框度陆、復(fù)選框鸵熟、提交按鈕、重置按鈕等扣典。

提示信息：一個(gè)表單中通常還需要包含一些說明性的文字妆毕，提示用戶進(jìn)行填寫和操作。

表單域： 他相當(dāng)于一個(gè)容器贮尖，用來容納所有的表單控件和提示信息笛粘，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法湿硝。如果不定義表單域薪前，表單中的數(shù)據(jù)就無法傳送到后臺(tái)服務(wù)器。

input 控件

在上面的語法中关斜，<input />標(biāo)簽為單標(biāo)簽示括，type屬性為其最基本的屬性，其取值有多種痢畜，用于指定不同的控件類型垛膝。除了type屬性之外，<input />標(biāo)簽還可以定義很多其他的屬性裁着，其常用屬性如下表所示繁涂。

input屬性.png

label標(biāo)簽

label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。

作用： 用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會(huì)獲得輸入焦點(diǎn)

如何綁定元素呢二驰？

for 屬性規(guī)定 label 與哪個(gè)表單元素綁定扔罪。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要輸入大量的信息，就需要用到<textarea></textarea>標(biāo)簽桶雀。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框矿酵，其基本語法格式如下：

<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
       文本內(nèi)容
</textarea>

select下拉菜單

使用select控件定義下拉菜單的基本語法格式如下

<select>
        <option>選項(xiàng)1</option>
        <option>選項(xiàng)2</option>
        <option>選項(xiàng)3</option>
       ...
</select>

注意：

1.<select></select>中至少應(yīng)包含一對(duì)<option></option>。

2.在option 中定義selected =" selected "時(shí)矗积，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)全肮。

form表單域

在HTML中，form標(biāo)簽被用于定義表單域棘捣，即創(chuàng)建一個(gè)表單，以實(shí)現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器评疗。創(chuàng)建表單的基本語法格式如下：

<form action="url地址" method="提交方式" name="表單名稱">
       各種表單控件
</form>

常用屬性：

1.Action 在表單收集到信息后，需要將信息傳遞給服務(wù)器進(jìn)行處理砌些，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址加匈。

2.method 用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post雕拼。

3.name 用于指定表單的名稱，以區(qū)分同一個(gè)頁面中的多個(gè)表單啥寇。

注意： 每個(gè)表單都應(yīng)該有自己表單域篮迎。

HTML5新表單屬性

最完整的表單屬性可以通過查閱w3cschool-h5表單屬性獲取,這里僅針對(duì)常見屬性講解

autocomplete(自動(dòng)完成)

能夠記錄用戶的輸入,并且給予提示,這就是autocomplete的作用

  • 取值:

    • on:開啟
    • off:關(guān)閉

  • 適用情況:

    • 一般用在input標(biāo)簽中

  • 示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    <input type="text" autocomplete="on" name="userName">
    <input type="submit">
</form>
</body>
</html>
  • 使用注意:
    • 標(biāo)簽需要添加name屬性
    • 只有提交了一次以后才會(huì)出現(xiàn)提示

autofocus(獲取焦點(diǎn))

當(dāng)某一頁有很多個(gè)可供輸入的元素時(shí),用戶需要使用鼠標(biāo)點(diǎn)選元素進(jìn)行輸入,為了提升用戶體驗(yàn),我們可以通過autofocus屬性來指定頁面中默認(rèn)選中的元素

  • 使用方法:

    • 需要哪個(gè)表單元素獲得焦點(diǎn),只需要添加該屬性即可
    • 不需要賦值,只需要添加屬性即可,見示例代碼

  • 示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    姓名:<input type="text"  name="userName">
    <br/>
    年齡<input type="number" name="telNum" autofocus>
    <input type="submit">
</form>
</body>
</html>
  • 使用注意:
    • 在沒有該屬性之前,能夠使用JavaScript來指定元素
    • 如果頁面中多個(gè)元素設(shè)置了該屬性,最后一個(gè)會(huì)獲得焦點(diǎn)

form(表單關(guān)聯(lián))

當(dāng)我們想要提交數(shù)據(jù)時(shí),需要把表單元素放到對(duì)應(yīng)的form標(biāo)簽中,這個(gè)屬性的出現(xiàn)讓表單元素的放置位置不在受到約束

  • 使用方法:

    • 想要某個(gè)表單外元素跟該表單建立聯(lián)系,只需要為元素添加屬性form="表單id"設(shè)置為想要建立聯(lián)系的表單id即可

  • 示例代碼

    • 讓表單外輸入愛好的input標(biāo)簽跟id為userForm表單建立聯(lián)系
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="userForm" >
    姓名:<input type="text"  name="userName">
    <br/>
    年齡:<input type="number" name="telNum" autofocus>
    <br/>
    <input type="submit">
</form>

<br/>
愛好:<input type="text" name="habbit" form="userForm">
</body>
</html>
  • 使用注意:
    • 雖然這個(gè)屬性可以讓元素的放置位置不在成為限制,但是編碼時(shí)依舊建議,將元素放置到對(duì)應(yīng)的表單中,除了兼容性問題以外,也為了提升代碼的可讀以及可維護(hù)性

multiple(多選)

如果想要在某個(gè)input標(biāo)簽中選擇多個(gè)值,可以使用該屬性

  • 適用情況:

    • 該屬性可以用在type為file標(biāo)簽內(nèi)

  • 示例代碼

    • 選擇多文件時(shí),需要按住ctrl按鈕
<input type="file" multiple >

placeholder(占位提示)

輸入元素內(nèi)默認(rèn)顯示一些提示信息,當(dāng)用戶輸入之后自動(dòng)消失,這種效果我們需要使用JavaScript來實(shí)現(xiàn),知道出現(xiàn)了placeholder這個(gè)屬性

  • 使用方式:

    • 直接為該屬性賦值想要提示的內(nèi)容即可

  • 適用情況:

    • 想要不通過JavaScript來實(shí)現(xiàn)提示功能

  • 示例代碼:

    • 顯示效果如下
    <input type="text"placeholder="輸入用戶名">
    placeholder.png

新的表單元素

除了在input標(biāo)簽中增加了一些新的type屬性以外,H5也推出了一些新的表單元素,由于瀏覽器的兼容問題,使用頻率并不廣,了解即可 w3cSchool_新表單元素

datalist

該元素規(guī)定了輸入?yún)^(qū)域的選項(xiàng)列表,可以讓用戶有一些選項(xiàng)

  • 測試代碼:

    • 注:測試代碼只是body內(nèi)部的代碼
    網(wǎng)址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn"/>
    <option label="Google" value="http://www.google.com"/>
    <option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>

電話: <input type="tel" list="tel_list">
<datalist id="tel_list">
    <option value="186xxx" label="移動(dòng)">移動(dòng)</option>
    <option value="187xxx" label="聯(lián)通">聯(lián)通</option>
    <option value="135xxx" label="天翼">天翼</option>
</datalist>

  • datalist:

    • id:id屬性,想要使用該datalist的元素需要通過list=id的方式來指定

  • option:

    • value:指定具體的值
    • label:提示信息

  • 注意:

    • 如果input的type為url,option中對(duì)應(yīng)的value需要使用http://開始

keygen

keygen 元素是密鑰對(duì)生成器（key-pair generator）。當(dāng)提交表單時(shí)示姿，會(huì)生成兩個(gè)鍵，一個(gè)是私鑰逊笆，一個(gè)公鑰栈戳。
私鑰（private key）存儲(chǔ)于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器难裆。公鑰可用于之后驗(yàn)證用戶的客戶端證書（client certificate）子檀，即實(shí)現(xiàn)非對(duì)稱加密
目前，瀏覽器對(duì)此元素的糟糕的支持度不足以使其成為一種有用的安全標(biāo)準(zhǔn)乃戈。

  • 使用頻率:低

output

屬于新的語義標(biāo)簽:用來放置輸出的內(nèi)容,但是不能自動(dòng)的計(jì)算結(jié)果,依舊需要通過js的方式來動(dòng)態(tài)修改結(jié)果,只是相比于其他的標(biāo)簽,語義性更強(qiáng)褂痰。

  • 使用頻率:低

input的新type屬性介紹

首先讓我們來看一張表

HTML5中的type.png

其中標(biāo)有紅色5的代表HTML5中推出的
更詳細(xì)內(nèi)容請(qǐng)查閱網(wǎng)址:w3cSchool-h5-type

測試代碼:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          form {
              width: 80%;
              background-color: #F7F7F7;
          }
          label {
              display: block;
              width: 80%;
              margin: 0 auto;
              font-size: 30px;
              font-weight: bold;
          }
          input {
              display: block;
              width: 80%;
              margin: 0 auto;
          }
      </style>
  </head>
  <body>
  <form action="">
      <fieldset>
          <legend>測試type屬性
          </legend>
          <label for="">color:
          </label>
          <input type="color">
          <label for="">date:
          </label>
          <input type="date">
          <label for="">datetime:
          </label>
          <input type="datetime">
          <label for="">datetime-local:
          </label>
          <input type="datetime-local">
          <label for="">month:
          </label>
          <input type="month">
          <label for="">week:
          </label>
          <input type="week">
          <label for="">time:
          </label>
          <input type="time">
          <label for="">email:
          </label>
          <input type="email">
          <label for="">number:
          </label>
          <input type="number">
          <label for="">range:
          </label>
          <input type="range">
          <label for="">search:
          </label>
          <input type="search">
          <label for="">tel:
          </label>
          <input type="tel">
          <input type="submit">
      </fieldset>
  </form>
  </body>
  </html>

運(yùn)行效果

input新type屬性.png

新type屬性的注意要點(diǎn)

  • 點(diǎn)擊不同type的input標(biāo)簽會(huì)有不一樣的彈出內(nèi)容

  • 如果發(fā)現(xiàn)w3cschool內(nèi)容不全,建議去MDN搜索

  • 并不是每一個(gè)新type屬性,在PC端都有不同的顯示

  • color, date, number 這些效果較為明顯

  • 兼容性問題

    • 由于ie的兼容性的問題,在不同的瀏覽器中顯示效果不盡相同
    • 但是在移動(dòng)設(shè)備上的支持效果較好,可以將該頁面發(fā)送到手機(jī)進(jìn)行測試
    • 實(shí)際開發(fā)中可以按照需求選用

input表單驗(yàn)證

用戶在輸入內(nèi)容的時(shí)候不可能做到全部正確,比如email地址``電話長度等等都有可能出現(xiàn)輸入錯(cuò)誤,試想一下,當(dāng)用戶辛辛苦苦的輸入了10多個(gè)表單內(nèi)容,點(diǎn)擊提交由于輸入錯(cuò)誤,內(nèi)容被清空了

w3cSchool 查閱位置

下面把a(bǔ)pi文檔的查閱位置添加如下

email屬性

在H5中的input的新type屬性email自帶格式驗(yàn)證

  • 示例代碼:
    • 當(dāng)我們點(diǎn)擊提交按鈕時(shí),如果輸入的email格式不正確,會(huì)彈出提示信息
    • email標(biāo)簽并不會(huì)驗(yàn)證內(nèi)容是否為空，這個(gè)需要注意
email自帶提示.png
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    <input type="submit">
</form>
</body>
</html>

required屬性

對(duì)于沒有自帶驗(yàn)證效果的標(biāo)簽,就需要手動(dòng)添加屬性增加驗(yàn)證了

使用方法:
只需要添加required屬性即可,不需要賦值

示例代碼:
當(dāng)控件沒有輸入任何內(nèi)容直接點(diǎn)擊提交時(shí),會(huì)彈出提示

required屬性.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required>
    <br/>
    <input type="submit">
</form>
</body>
</html>

pattern 自定義驗(yàn)證規(guī)則

使用required標(biāo)簽只能夠驗(yàn)證內(nèi)容是否為空,如果想要驗(yàn)證的更為準(zhǔn)確就需要自定義驗(yàn)證規(guī)則了

使用方法:

  • 在需要添加自定義驗(yàn)證規(guī)則的元素中添加required標(biāo)簽
  • 使用正則表達(dá)式編寫驗(yàn)證規(guī)則

示例代碼:

當(dāng)我們輸入的內(nèi)容跟驗(yàn)證條件不符時(shí),就會(huì)彈出對(duì)應(yīng)的提示

自定義驗(yàn)證.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}">
    <br/>
    <input type="submit">
</form>
</body>
</html>

自定義驗(yàn)證信息

系統(tǒng)的提示消息只能夠提示格式錯(cuò)誤,如果想要更為詳細(xì)的就需要我們通過js來自定義了

使用方法:

  • 注冊(cè)事件:oninput:輸入時(shí),oninvalid驗(yàn)證失敗
  • 設(shè)置自定義信息dom.setCustomValidity("這里輸入提示信息");

示例代碼:
輸入時(shí),會(huì)彈出oninput綁定的代碼

輸入中.png

驗(yàn)證失敗時(shí),會(huì)彈出oninvalid綁定的代碼

驗(yàn)證失敗.png
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}" id="telInput">
    <br/>
    <input type="submit">
</form>
</body>
</html>
<script>
    var telInput = document.getElementById("telInput");
    // 正在輸入時(shí)
    telInput.oninput=function () {
        this.setCustomValidity("請(qǐng)正確輸入哦");
    }
    // 驗(yàn)證失敗時(shí)
    telInput.oninvalid=function(){
        this.setCustomValidity("請(qǐng)不要輸入火星的手機(jī)號(hào)好嗎症虑？");
    };

</script>

總結(jié)

  • 優(yōu)點(diǎn):
    • html5自帶的驗(yàn)證使用便捷
    • 不需要額外的js框架
  • 缺點(diǎn):
    • 兼容性問題
    • 如果想要兼容所有瀏覽器,建議使用js驗(yàn)證框架
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末缩歪，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子谍憔，更是在濱河造成了極大的恐慌匪蝙，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,039評(píng)論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件习贫，死亡現(xiàn)場離奇詭異逛球，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)颤绕，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門物独，熙熙樓的掌柜王于貴愁眉苦臉地迎上來议纯，“玉大人瞻凤，你說我怎么就攤上這事阀参≌鞍樱” “怎么了所刀？”我有些...
    開封第一講書人閱讀 165,417評(píng)論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵忧吟，是天一觀的道長斩披。 經(jīng)常有香客問我垦沉，道長厕倍，這世上最難降的妖魔是什么绑青？ 我笑而不...
    開封第一講書人閱讀 58,868評(píng)論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任闸婴，我火速辦了婚禮邪乍，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘榜配。我一直安慰自己蛋褥，他們只是感情好烙心，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布爪瓜。 她就那樣靜靜地躺著，像睡著了一般薄货。 火紅的嫁衣襯著肌膚如雪菲驴。 梳的紋絲不亂的頭發(fā)上骑冗，一...
    開封第一講書人閱讀 51,692評(píng)論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音薯蝎，去河邊找鬼占锯。 笑死消略，一個(gè)胖子當(dāng)著我的面吹牛唆铐，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 40,416評(píng)論 3贊 419
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼魁衙，長吁一口氣：“原來是場噩夢啊……” “哼认烁！你這毒婦竟也來了却嗡？” 一聲冷哼從身側(cè)響起稽穆，我...
    開封第一講書人閱讀 39,326評(píng)論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤舌镶，失蹤者是張志新（化名）和其女友劉穎豪娜，沒想到半個(gè)月后瘤载，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鸣奔，經(jīng)...
    沈念sama閱讀 45,782評(píng)論 1贊 316
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡挎狸，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評(píng)論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年锨匆，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片茅主。...
    茶點(diǎn)故事閱讀 40,102評(píng)論 1贊 350
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖玷禽，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情瑞佩，我是刑警寧澤，帶...
    沈念sama閱讀 35,790評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站稠炬，受9級(jí)特大地震影響首启，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜褒纲，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評(píng)論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一莺掠、第九天 我趴在偏房一處隱蔽的房頂上張望彻秆。 院中可真熱鬧唇兑，春花似錦桦锄、人聲如沸察纯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評(píng)論 0贊 22
  • 一樁弒父案具则，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽博肋。三九已至，卻和暖如春膊畴，著一層夾襖步出監(jiān)牢的瞬間唇跨，已是汗流浹背衬衬。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工玉控， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留狮惜，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,332評(píng)論 3贊 373
  • 代替公主和親
    正文 我出身青樓懒叛，卻偏偏與公主長得像薛窥，于是被迫代替她去往敵國和親眼姐。 傳聞我的和親對(duì)象是個(gè)殘疾皇子众旗，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理滩租，服務(wù)發(fā)現(xiàn)律想，斷路器技即，智...
    卡卡羅2017閱讀 134,661評(píng)論 18贊 139
  • HTML標(biāo)簽解釋大全 一而叼、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,247評(píng)論 1贊 41
  • 落日的余暉難以抵擋黑暗的降臨 眨眼時(shí)莹弊，夜忍弛，真的來了 墨色夜空细疚，皓月星辰一弧流星劃過天幕中留下不滅的永恒我無法抗拒如...
    愛爬格子的菜鳥閱讀 236評(píng)論 0贊 0
  • 最近一直沉迷于在Unibet上面押注賭錢疯兼。投入的賭資不多600元吧彪，但是沒有抵擋住誘惑全都輸?shù)袅艘搪恪Ｔ谫€博的這一段時(shí)間...
    Joe是樂當(dāng)家的閱讀 405評(píng)論 1贊 1
  • 今天下班回來心情很低落傀缩，自己總找不到地方發(fā)泄农猬，回到家和老公說兩句話了斤葱，可是話不投機(jī)揍堕，總是打擊我。讓我心里還更難過。...
    僞妳鎖訫閱讀 200評(píng)論 0贊 0