在這一步中，你將在你的 App 中添加一個輸入框。作為一個用戶文本輸入框，Dart可以從中取得一個值。
## 編輯 **piratebadge.html**
在 class 為 widgets 的 `<div>` 中添加一個 `<input>` 標簽。
...
<div class="widgets">
<div>
<input type="text" id="inputName" maxlength="15">
</div>
</div>
...
- `<input>` 標簽的 id 是 `inputName`。Dart 使用 `#inputName` 的 CSS 選擇器從 DOM 中選擇這個元素
## 編輯 piratebadge.dart
在文件的頂部引入 `dart:html` 庫。
import 'dart:html';
-
這里從 `dart:html` 引入了所有的類和其他資源。
-
不要擔心臃腫的代碼。構建程序會幫你進一步簡化代碼。
-
`dart:html` 庫包含了所有DOM元素類型。
-
一會兒你將會使用一些關鍵字來導入一些特殊的庫。
-
Dart 編輯器會提示你導入的庫是未被使用的，沒關系，下一步我們就會修復它。
添加一個方法來監聽輸入框
void main() {
querySelector('#inputName').onInput.listen(updateBadge);
}
-
在 `dart:html` 中定義的 `querySelector()` 方法，獲取到了指定的 DOM。這里，通過#inputName選擇器獲取到了指定的輸入框。
-
`querySelector()` 方法的返回值是一個 DOM 元素。
-
鼠標和鍵盤事件被存放在一個流中。
-
提供一個異步的流數據序列。使用 `listen()` 方法，可以從流中得到安全的數據。
-
`onInput.listen()` 監聽到了輸入框的流事件。當監聽到時，`updateBadge()` 方法被調用。
-
當用戶按下一個鍵時，將產生一個事件。
-
你可以用單引號或雙引號來創建一個字符串。
-
Dart 編輯器提示你有個方法沒有被創建，讓我們來解決它。
用一個 `top-level` 級別的方法來實現一個事件方法。
...
void updateBadge(Event e) {
querySelector('#badgeName').text = e.target.value;
}
-
這個函數將 `badgename` 元素的值設置成文本輸入字段的值。
-
事件 `e` 是 `updateBadge` 函數的參數. 這個參數的名字是 `e`；類型是一個 `Event`
修復警告信息
...
void updateBadge(Event e) {
querySelector('#badgeName').text = (e.target as InputElement).value;
}
- 在這個例子中，`e.target` 是產生事件的輸入源。
## 運行應用
保存你的文件
右擊 `piratebadge.html` 選擇 `Run in Dartium`。
和下面的示例比較一下。
**圖片 3.1** 運行
