input 是文本框 .. 在我们的表单里添加一个 input .. type 的值是这个 input 元素的类型 .. 默认是 text .. 想在表单里包含这个元素里的值需要给它起个名字 .. 用一个 name 属性 .. 名字可以是 text ..

placeholder 可以在文本框里面添加一个点位符文字 .. 提示用户这个文本框里应该输入什么样的信息 ..

在页面的样式文件里再去设计一下 input 的样式 . 添加一个 input .. 先用 padding 添加点内边距 .. 大小是 8px .. background ，背景颜色是白色 .. 再用 margin 添加点外边距 .. 然后再给它添加一个边框 ..

1 个像素的灰色实线 .. 然后用 border-radius 添加点圆角效果 ..

预览

在这个文本框里输入点东西 .. 按一下提交 .. 这个文本框里的值会在表单的 submit 事件处理里面得到 ..

在表单组件上绑定事件可以使用 bind ，后面加上事件的名字 .. 比如 bind 一个 input 事件，添加的属性就是 bindinput ，属性的值就是事件处理方法 .. 比如 inputHandler ..

在页面的主逻辑里面定义一个 inputHandler .. 接收一个 event 参数 .. 然后在控制台上我们可以输出 event，detail 下面的 value 属性的值 ..

再试一下

在文本框里输入内容 .. 会实时的在控制台上输出我们输入的内容 ..

textarea

再添加一个 textarea .. 文本区域，可以用这种组件向用户收集大块的内容 .. 同样需要一个 name 属性，给它起个名字 .. placeholder 是点位符文字 .. textarea ... 也可以用 bind 去绑定事件 .. 这里给它绑定一个 input 事件 . 也用 inputHandler 来处理 .

然后再设置一下文本区域的样式 .. 添加一个 textarea ... 再把 width 的值设置成 auto ...

再到开发者工具去试一下 .. 输入内容 .. 然后提交 ..

表单里面的数据，会包含表单里的文本框还有文本区域里的内容 ..