2e:null 2f:["$","title",null,{"children":"HTML Input Types Explorer | Andrew Wooldridge | Observable"}] 34:Tcda,choices = [ {name: "text", code: ``}, {name: "button", code: ``}, {name: "checkbox", code: ` Scales`}, {name: "color", code: ` Head`}, {name: "date", code:`Start date: `}, {name: "datetime-local", code: `Choose a time for your appointment: `}, {name: "email", code: `Enter your globex.com email: `}, {name: "file", code: `Choose a profile picture: `}, {name: "hidden", code:` `}, {name: "image", code:``}, {name: "month", code: `Start month: `}, {name: "number", code: `Number of tentacles (10-100): `}, {name: "password", code: ` Password (8 characters minimum): `}, {name: "radio", code: ` Huey`}, {name: "range", code: ` Volume`}, {name: "reset", code: ` `}, {name: "search", code:`Search the site: `}, {name: "submit", code:` `}, {name: "tel", code: `Enter your phone number: `}, {name: "time", code: `Choose a time for your meeting: `}, {name: "url", code:`Enter an https:// URL: `}, {name: "week", code: `Choose a week in May or June: `} ]35:[{"id":"d65a99c8d2503960075a118f114374dcbeaed8509f4657002c2ad2fdc6ce513afd168a2a507c482a7f547008b7a01ee2a39d803bd516a032f82ce9b5b6edc988","href":"https://static.observableusercontent.com/files/d65a99c8d2503960075a118f114374dcbeaed8509f4657002c2ad2fdc6ce513afd168a2a507c482a7f547008b7a01ee2a39d803bd516a032f82ce9b5b6edc988","name":"login-button.png","type":"image/png","lastModified":1635699386332.706,"size":2582}] 32:{"id":"1823862649a6153d","slug":"html-input-types-explorer","title":"HTML Input Types Explorer","thumbnail":"cf71d3ef2bf9c4f1cc9da21036ce809c347ca2d8d2d7db3a9f86a7f74c8bae37","access_level":"public","create_time":"$D2021-10-31T15:35:57.722Z","update_time":"$D2021-10-31T17:14:53.559Z","view_time":null,"first_public_time":"$D2021-10-31T17:19:48.386Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":"starter_2024"},"version":103,"publish_version":103,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}],"members":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"bef3cf5a9bdfd5d0","slug":"tips-and-utilities","title":"Tips and Utilities","owner":{"id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge"}},"type":"notebook","body":{"title":"HTML Input Types Explorer","cells":[{"id":0,"value":"# HTML Input Types Explorer\n by Andrew Wooldridge\n October 31, 2021","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Preview all the different kinds of input types by choosing from the dropdown below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"For more information read on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input). (Code examples are from MDN.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"viewof inputsChoice = Inputs.select(choices, {\n label: html`Select one`,\n format: x => x.name\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"### Markup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof textarea = Inputs.textarea({\n placeholder: \"Type here\",\n value: inputsChoice.code,\n rows: 6\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"### Preview","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"html`

\n${inputsChoice.code}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"# Codes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"# Includes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"import {style} with {myFontName as fontName} from \"@triptych/google-font-embedder\"\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"myFontName = \"Work Sans\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"