# 一覧画面へのテキストボックス等の表示

**URL:** <https://community.cybozu.dev/t/topic/3023>\
**Category:** kintone 開発相談\
**Created:** [2018 年 4 月 25 日午前 3:04 UTC](https://community.cybozu.dev/t/topic/3023 "2018-04-25T03:04:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account700](https://avatars.discourse-cdn.com/v4/letter/l/9fc348/32.png) [@Legacy\_Account700](https://community.cybozu.dev/u/Legacy_Account700)\
**Post date:** [2018 年 4 月 25 日午前 3:04 UTC](https://community.cybozu.dev/t/topic/3023/1 "2018-04-25T03:04:43Z")

</div>

お世話になっております。

一覧画面のヘッダ部分にボタンや文字を表示できることは過去の記事で学んだのですが、テキストボックスやドロップダウンやラジオボタン等も表示できるのでしょうか。

また、表示した文字を改行することは可能なのでしょうか。

可能であれば、JavaScriptでの記述方法をお教えいただきたいです。

お手数ですが、ご教示をよろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2018 年 4 月 26 日午前 9:59 UTC](https://community.cybozu.dev/t/topic/3023/2 "2018-04-26T09:59:29Z")

</div>

小林様

お世話になっております。  
cstapの江田です。

可能です。  
方法は様々ですが、innerHTMLを使うのが簡単かと思います。  
要素内のHTMLを直接書き換えるので、HTMLの知識さえあれば書けます。

書き方は  
kintone.app.getHeaderMenuSpaceElement().innerHTML = ‘HTMLコード’;  
のような形です。

例えばテキストボックスであれば、  
kintone.app.getHeaderMenuSpaceElement().innerHTML = ‘\<input type=“text”\>’;  
となります。

ラジオボタン等についても、HTMLコードを直接記述して作成できます。  
こちらのページの入力フォームという項目を参考にするとよいと思います。  
[http://www.htmq.com/html/indexm.shtml](http://www.htmq.com/html/indexm.shtml)

また、文字の改行は\<br\>タグでできます。  
kintone.app.getHeaderMenuSpaceElement().innerHTML = ‘あいうえお\<br\>かきくけこ’;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account700](https://avatars.discourse-cdn.com/v4/letter/l/9fc348/32.png) [@Legacy\_Account700](https://community.cybozu.dev/u/Legacy_Account700)\
**Post date:** [2018 年 4 月 27 日午前 3:27 UTC](https://community.cybozu.dev/t/topic/3023/3 "2018-04-27T03:27:42Z")

</div>

江田様

ご回答ありがとうございます。

お教えいただいたコードでうまく設定できました。ありがとうございました。

もう一つ伺いたいのですが、設置したテキストボックスに入力された値を取得するにはどのようなコードを記述すればよろしいのでしょうか。

お手数ですが、よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2018 年 5 月 1 日午前 9:25 UTC](https://community.cybozu.dev/t/topic/3023/4 "2018-05-01T09:25:06Z")

</div>

小林様

お世話になっております。  
idを指定しておいて「getElementById()」にて取得するのが簡単かと思います。

// テキストボックス作成  
kintone.app.getHeaderMenuSpaceElement().innerHTML = ‘\<input type=“text” id=“myInputText”\>’;

// value取得  
var a = document.getElementById(‘myInputText’).value;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account700](https://avatars.discourse-cdn.com/v4/letter/l/9fc348/32.png) [@Legacy\_Account700](https://community.cybozu.dev/u/Legacy_Account700)\
**Post date:** [2018 年 5 月 2 日午前 8:44 UTC](https://community.cybozu.dev/t/topic/3023/5 "2018-05-02T08:44:46Z")

</div>

江田様

お教えいただいた「getElementById()」で取得することができました。

大変助かりました、ご回答ありがとうございました。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 11 月 12 日午前 6:22 UTC](https://community.cybozu.dev/t/topic/3023/6 "2024-11-12T06:22:14Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。