在網(wǎng)頁設(shè)計(jì)中,信息發(fā)送框是非常常用的組件。它可以讓用戶向網(wǎng)站或其他用戶發(fā)送信息,方便信息的傳遞和交流。那么,在 HTML 中,如何實(shí)現(xiàn)一個(gè)簡單的信息發(fā)送框呢?下面來看一下代碼實(shí)現(xiàn):
首先,在 HTML 代碼中可以使用文本域(textarea)實(shí)現(xiàn)消息輸入框,這個(gè)文本域可以接收用戶的輸入,并且支持多行文本輸入。代碼如下:
<textarea rows="4" cols="50" name="msg"> 請?jiān)谶@里輸入你想要發(fā)送的信息! </textarea>上述代碼中的 textarea 標(biāo)簽中,rows 屬性指定了文本域的行數(shù),cols 屬性指定了文本域的列數(shù),name 屬性用于給表單元素取名,這個(gè)名字在提交表單時(shí)會(huì)被用來識(shí)別此元素的值。在 textarea 標(biāo)簽之間可以寫入默認(rèn)的消息提示信息,如上述代碼中的 “請?jiān)谶@里輸入你想要發(fā)送的信息!” 接著,添加一個(gè)提交按鈕,用來觸發(fā)消息的發(fā)送,代碼如下:
<p> <button type="submit"> 發(fā)送 </button> </p>在按鈕標(biāo)簽中,type 屬性指定了按鈕的類型,這里是 “submit” 用于將表單的數(shù)據(jù)提交到服務(wù)器。 最后,為了讓用戶更加方便的發(fā)送信息,可以使用表單(form)標(biāo)簽封裝上述代碼,代碼如下:
<form action="" method="POST" class="message-form"> <textarea rows="4" cols="50" name="msg"> 請?jiān)谶@里輸入你想要發(fā)送的信息! </textarea> <p> <button type="submit"> 發(fā)送 </button> </p> </form>在表單標(biāo)簽中,action 屬性指定了表單提交的 URL,method 屬性指定了表單提交的方式,這里是 “POST” 方式。class 屬性可以給表單設(shè)置樣式。 綜合起來,一個(gè)簡單的消息發(fā)送框的代碼實(shí)現(xiàn)如下:
<form action="" method="POST" class="message-form"> <textarea rows="4" cols="50" name="msg"> 請?jiān)谶@里輸入你想要發(fā)送的信息! </textarea> <p> <button type="submit"> 發(fā)送 </button> </p> </form>上述代碼中,使用 p 標(biāo)簽作為段落標(biāo)簽。若要調(diào)整樣式可以在 CSS 中添加相應(yīng)樣式。