# 6.2 設定表單資料

## text 一般文字框的設定值

html：

```markup
<input type="text" class="the_text" id="the_text">
```

「設定值」的語法：

```javascript
var the_text = document.getElementById("the_text");

// 以下三種方式皆可
the_text.value = "測試"; // 這個較常見，但不會改變到標籤上的屬性

//the_text.setAttribute("value", "測試二");
//the_text.defaultValue = "測試三"; // 極少見
```

範例：

{% embed url="<https://codepen.io/carlos411/pen/oNxBaYP>" %}

{% hint style="info" %}
type 等於 password、hidden 等類似一般文字框，操作都一樣。
{% endhint %}

## textarea 多行文字框設定值

html：

```markup
<textarea id="the_textarea"></textarea>
<button type="button" id="the_btn">按鈕</button>
```

JS：

如果要斷行，要用 **`\n`**。

```javascript
var the_textarea = document.getElementById("the_textarea");
the_textarea.innerHTML = "這是文字\n新的一行";
```

範例：

{% embed url="<https://codepen.io/carlos411/pen/oNxBaGQ>" %}

## select 下拉選單的設定值

html：

```markup
<select name="the_select" id="the_select">
  <option value="a">選項一</option>
  <option value="b">選項二</option>
  <option value="c">選項三</option>
</select>
```

JS：

```javascript
var the_select = document.getElementById("the_select");
the_select.value = "c"; // 設定值
```

範例：

{% embed url="<https://codepen.io/carlos411/pen/LYNxgmM>" %}

## checkbox 的勾選

### 判斷有無勾選

html：

```markup
<input type="checkbox" id="the_checkbox">
<button type="button" id="the_btn">取文字</button>
```

JS：

```javascript
var the_checkbox = document.getElementById("the_checkbox");
if(the_checkbox.checked){
  alert("有勾選");
}else{
  alert("沒有勾選");
}
```

範例：

{% embed url="<https://codepen.io/carlos411/pen/xxVgyem>" %}

### 設定勾選或不勾選

JS：

```javascript
var the_checkbox = document.getElementById("the_checkbox");
if(the_checkbox.checked){ // 判斷目前有無勾選
  the_checkbox.checked = false; // 不勾選
}else{
  the_checkbox.checked = true; // 勾選
}
```

範例：

{% embed url="<https://codepen.io/carlos411/pen/eYZgPqK>" %}

## radio 單選框的選取

### 判斷有無選取

html：

```markup
<input type="radio" class="food_type" name="food_type" id="check1" value="1" checked>
<input type="radio" class="food_type" name="food_type" id="check2" value="2">
<input type="radio" class="food_type" name="food_type" id="check3" value="3">

<button type="button" id="the_btn">取文字</button>
```

JS：

```javascript
var food_type = document.querySelectorAll("input[name='food_type']");
food_type.forEach(function(item, i){ // 執行迴圈
  console.log(item.checked); // 該項是否有勾選
});
```

範例：

{% embed url="<https://codepen.io/carlos411/pen/KKzarzQ>" %}

### 設定某項選取

JS：

```javascript
var food_type = document.getElementById("check3");
food_type.checked = true;
```

範例：

{% embed url="<https://codepen.io/carlos411/pen/OJNWaPR>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/javascript-web/6.-biao-chan-form/6.2-yan-zheng.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.