input表單怎么制作多行文本輸入框

input表單怎么制作多行文本輸入框？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

一、首先我們來看看如何制作文本框：

<form action="url地址" method=“get/post” name="表單名稱">
<p>這是文本框</p>
用戶名：<input type="text" name="username">

這樣的一個基本的用戶名的文本框就出來了，我們來看看效果：

如上圖就是一個用戶名的輸入框，是不是很熟悉，很多網站都有這個的，不過他們添加了很多別的元素讓表單變的更漂亮了，這個以后我們會學到的。(想看更多就去億速云html在線視頻課程)

二、現在我們再來說說如何制作密碼框：

我們知道密碼是個人隱私，每個人都不希望自己的密碼在自己輸入的時候被別人看見，所以基本上所有網站的密碼框內輸入的密碼都是保密的，一輸入就是以星號或者以小圓點的方式顯示。

現在讓我們來看看這種input標簽的密碼框是如何制作的吧。

<form action="url地址" method=“get/post” name="表單名稱">
<p>這是文本框</p>
用戶名：<input type="text" name="username"></br>
密&nbsp;&nbsp;&nbsp;碼：<input type="password" name="password">

如上面代碼，我們應該能猜到這是干什么的吧，先看看效果圖再說：

你看，如果沒有那三個空格符，密碼和用戶名就會不對齊，一般都是用層疊樣式表來對齊的，但是現在我們只講HTML，現在還不說css,所以現在我用了三個空格符來把密碼和用戶名對齊，這也是最簡單的辦法。

可能是因為小編有強迫癥吧，不管怎么說，這樣的效果才是任何人都能看的，如果沒有對齊，就難看了很多。

三、密碼框看完了，現在我們來看看單選框如何的制作吧：

我們這里就以單選男女為例（當然第三類的就不說了）

<form action="url地址" method=“get/post” name="表單名稱">
<p>這是文本框</p>
用戶名：<input type="text" name="username"></br>
密&nbsp;&nbsp;&nbsp;碼：<input type="password" name="password">
<p>單選框</p>
單選：<input type="radio" name="sex" value="nan">男
      <input type="radio" name="sex" value="nv">女

這個來看看效果吧

這就是單選框，也是常用的框架吧，男和女只能選一個，不能兩個都選的。

四、有了單選框，那接下來就說說多選框吧：

<form action="url地址" method=“get/post” name="表單名稱">
<p>這是文本框</p>
用戶名：<input type="text" name="username"></br>
密&nbsp;&nbsp;&nbsp;碼：<input type="password" name="password">
<p>單選框</p>
單選：<input type="radio" name="sex" value="nan">男
      <input type="radio" name="sex" value="nv">女
<p>多選框</p>
多選：<input type="checkbox" name="n">吃飯
      <input type="checkbox" name="n">睡覺
      <input type="checkbox" name="n">打豆豆
      <input type="checkbox" name="n">喝水

效果如圖

這圖把上面的東西都選上了，多選框是都能選上，當然還可以設置默認選擇一個的，只需要加checked=“checked”這個屬性，在哪個多選框內添加都能在網頁中一刷新就能顯示出來，這就是默認選中的效果。

五、說了這么多，接下來就說說最后的提交按鈕和重置按鈕吧：

這兩個都是非常重要的按鈕，重置按鈕能把你網頁上選中或者填寫的東西一鍵恢復原樣。提交是把你所有填寫和選中的都提交給后臺。下面來看代碼：

<form action="url地址" method=“get/post” name="表單名稱">
<p>這是文本框</p>
用戶名：<input type="text" name="username"></br>
密&nbsp;&nbsp;&nbsp;碼：<input type="password" name="password">
<p>單選框</p>
單選：<input type="radio" name="sex" value="nan">男
      <input type="radio" name="sex" value="nv">女
<p>多選框</p>
多選：<input type="checkbox" name="n">吃飯
      <input type="checkbox" name="n">睡覺
      <input type="checkbox" name="n">打豆豆
      <input type="checkbox" name="n">喝水
<p>重置按鈕</p>
重置：<input type="reset" name="">
<p>提交按鈕</p>
提交：<input type="submit" name="">

由于沒有后臺，所以就沒填寫后臺地址了。不過不影響效果

這就是一個頁面的填寫注冊的大部分窗口了吧，都很簡單，上面的好多都是以固定的形式出現的，還有個別的屬性在以后也會慢慢了解到。

感謝各位的閱讀！看完上述內容，你們對input表單怎么制作多行文本輸入框大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。