標籤之美十——用戶交互元素

時間 2019-11-07

標籤標籤之美用戶交互元素简体版

原文原文鏈接

標籤之美——用戶交互元素

任何一個網頁都會提供用戶交互的功能，包括帳號密碼的提交，留言板等用戶信息的的獲取。android

1、用戶交互表單的屬性

表單使用<form></form>來建立。post

一、跳轉連接屬性

表單的跳轉是在提交數據後跳轉到指定的URL，使用action屬性，以下：spa

<form action="http://">
</form>

二、傳遞數據的方式

表單跳轉傳遞數據時能夠設置一個傳遞方式，使用method能夠設置方式爲get或者post,delate,put：code

<form action="http://" method="get">
</form>

三、表單名稱

表單但是設置一個名稱，經過name屬性來設置：orm

<form name="my" action="http://" method="get">
</form>

2、輸入表單

輸入表單使用<input/>建立，必須在表單元素中圖片

<form name="my" action="http://" method="get">
<input/>
</form>

效果以下：get

一、輸入文本框

輸入表單有type屬性能夠用來設置類型：input

<form name="my" action="http://" method="get">
文本框<input type="text" name="文本框"/><!--name:表單名稱-->
</form>

效果以下：it

二、密碼輸入框

<form name="my" action="http://" method="get">
密碼框<input type="password" name="密碼框"/><!--name:表單名稱-->
</form>

效果以下：io

三、輸入單選框

設置type=radio能夠建立單選框，單選框須要設置幾個屬性，同一系列的單選框必須有相同的name值，不相同的value值，能夠經過添加checked鍵值來設置默認選中，示例以下：

<form name="my" action="http://" method="get">
<input type="radio" name="性別" value="男" checked/>男
<br/>
<input type="radio" name="性別" value="女"/>女
</form>

效果以下：

四、輸入複選框

和單選框類似，可使用type=checkbox建立複選框:

<body>
<form name="my" action="http://" method="get">
<input type="checkbox" name="愛好" value="HTML" checked/>HTML
<br/>
<input type="checkbox" name="愛好" value="iOS"/>iOS<br/>
<input type="checkbox" name="愛好" value="android"/>android
</form>

效果以下：

五、提交按鈕

使用type=submit來建立提交按鈕，value值爲按鈕顯示的文字：

<form name="my" action="http://" method="get">
<input type="checkbox" name="愛好" value="HTML" checked/>HTML
<br/>
<input type="checkbox" name="愛好" value="iOS"/>iOS<br/>
<input type="checkbox" name="愛好" value="android"/>android<br/>
<input type="submit" value="提交"/>
</form>

效果以下：

六、重置按鈕

<form name="my" action="http://" method="get">
<input type="checkbox" name="愛好" value="HTML" checked/>HTML
<br/>
<input type="checkbox" name="愛好" value="iOS"/>iOS<br/>
<input type="checkbox" name="愛好" value="android"/>android<br/>
<input type="reset" value="重置"/>

效果以下：

點擊重置按鈕後，輸入的內容會被重置。

七、圖像按鈕

圖像按鈕和普通按鈕的用法類似，設置type=image能夠建立圖像按鈕，只是這個按鈕多了一個src的屬性用來設置圖片的路徑地址。

3、下拉列表

經過<select></select>和<option></option>標籤來設置下拉菜單和其中的選項，示例以下：

<form name="my" action="http://" method="get">
<select name="下拉框">
<option value="愛好" selected>HTML</option>
<option value="愛好">iOS</option>
<option value="愛好">android</option>
</select>
</form>

效果以下：

4、文本輸入框

使用<textarea></textarea>來設置文本輸入框，屬性rows和clos能夠分別設置輸入框的行數和列數，示例以下：

<form name="my" action="http://" method="get">
<textarea name="文本輸入框" rows="5" cols="50">
</textarea>
</form>

效果以下：

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。