input, select, textarea等フォームの属性だけを抽出するjQueryスニペット

# 要点

あるページ内にある、
フォームを構成する要素の属性だけを抽出する
jQueryスニペットを書きました。

# 利用シーン

```input, select, textarea```などの要素がもつ
```id, name, value```などの属性を一括で抽出したいとき。

# 具体例
## input, select, textarea要素のname属性一覧を抽出
```js
var attr_list = []
$('input, select, textarea').each(function(i, elem) {
  if ( ($(elem).attr('name')) //name未定義は除外
      && ($(elem).attr('type') != "hidden") //type=hiddenは除外
     ) {
    attr_list.push($(elem).attr('name'))
  }
});
attr_list = Array.from(new Set(attr_list));
var result = attr_list.map(x=>'name='+x).join('\n')
console.log(result)
```

以下URLをChromeで開いて、
https://getbootstrap.com/docs/4.0/components/forms/
DevToolのConsole欄に上記スニペットをコピペして実行した結果、
name属性だけ取り出すことができた。

<img width="350" alt="スクリーンショット 2018-10-16 23.34.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/210660/a1cfb0a1-476c-1d01-78e3-34cce957f187.png">



## id属性とvalue属性のタブ区切り
```js
var attr_list = []
$('input, select, textarea').each(function(i, elem) {
  var buffer = []
  if ( ($(elem).attr('id'))
      && ($(elem).attr('type') != "hidden")
     ) {
    buffer.push($(elem).attr('id'))
    buffer.push($(elem).attr('value'))
    attr_list.push(buffer.join('\t'))
  }
});
var result = attr_list.join('\n')
console.log(result)
```

以下URLをChromeで開いて、
https://getbootstrap.com/docs/4.0/components/forms/
DevToolのConsole欄に上記スニペットをコピペして実行した結果、
id,value属性だけを取り出すことができた。

```text

search-input	
exampleInputEmail1	
exampleInputPassword1	
exampleCheck1	
exampleFormControlInput1	
exampleFormControlSelect1	
exampleFormControlSelect2	
exampleFormControlTextarea1	
exampleFormControlFile1	
staticEmail	email@example.com
inputPassword	
staticEmail2	email@example.com
inputPassword2	
defaultCheck1	
defaultCheck2	
exampleRadios1	option1
exampleRadios2	option2
exampleRadios3	option3
inlineCheckbox1	option1
inlineCheckbox2	option2
inlineCheckbox3	option3
inlineRadio1	option1
inlineRadio2	option2
inlineRadio3	option3
blankCheckbox	option1
blankRadio1	option1
formGroupExampleInput	
formGroupExampleInput2	
inputEmail4	
inputPassword4	
inputAddress	
inputAddress2	
inputCity	
inputState	
inputZip	
gridCheck	
inputEmail3	
inputPassword3	
gridRadios1	option1
gridRadios2	option2
gridRadios3	option3
gridCheck1	
colFormLabelSm	
colFormLabel	
colFormLabelLg	
inlineFormInput	
inlineFormInputGroup	
autoSizingCheck	
inlineFormInputName	
inlineFormInputGroupUsername	
autoSizingCheck2	
inlineFormCustomSelect	
customControlAutosizing	
inlineFormInputName2	
inlineFormInputGroupUsername2	
inlineFormCheck	
inlineFormCustomSelectPref	
customControlInline	
inputPassword5	
inputPassword6	
disabledTextInput	
disabledSelect	
disabledFieldsetCheck	
validationCustom01	Mark
validationCustom02	Otto
validationCustomUsername	
validationCustom03	
validationCustom04	
validationCustom05	
invalidCheck	
validationDefault01	Mark
validationDefault02	Otto
validationDefaultUsername	
validationDefault03	
validationDefault04	
validationDefault05	
invalidCheck2	
validationServer01	Mark
validationServer02	Otto
validationServerUsername	
validationServer03	
validationServer04	
validationServer05	
invalidCheck3	
customControlValidation1	
customControlValidation2	
customControlValidation3	
validatedCustomFile	
validationTooltip01	Mark
validationTooltip02	Otto
validationTooltipUsername	
validationTooltip03	
validationTooltip04	
validationTooltip05	
customCheck1	
customCheck2	
customRadio1	
customRadio2	
customRadioInline1	
customRadioInline2	
customCheckDisabled	
customRadioDisabled	
customFile	
customFileLang	
```


# 発展

「または」で並べている
```input, select, textarea```要素を加減して、

```js
$(elem).attr('＜属性キー＞')
```
で、```id, name, value```以外でも、
さまざまな属性の値を取得できます。

以上です。