为什么html我表单提交文本框数据获取不到_HTML | 表单的制作

上一期我们学习了如何制作表格，表单与表格不同之处就是表格是用来放数据的,而表单是用来把数据提交到下一页的，例如登录、注册等功能。

那怎样制作一个表单呢

以下是表单的基本结构

    输入框

    提交按钮

其中input type中比较常用的类型有

Text

Password

Hidden

Radio(单选框)

Checkbox(多选框)

Reset

Submit

Select

这里细讲一下text

通过对input表单元素的type设置text来让浏览器创建Text表单元素对象。Text对象的value属性表示的就是文本框中的值，文本框的input标记还具有size属性(用于决定文本框具有多少个字符的宽度)、maxlength属性(用于决定用户可以在文本框中输入多少个字符)。

浏览器打开如下：

Text对象还具有select()方法，用以选择或加亮文本框中的文本，当使用者在文本框中输入了无效值的时候，我们可以通过focus()方法将输入焦点设置回该文本框，并且使用select()方法，选中文本框中的文本，并且光标落在文本框的右边。

Text对象的value获取到的都是字符串类型的值，哪怕输入的是纯数字也会转换成字符串。

Text对象具有多个事件处理器

 onfocus事件处理器(获得焦点)

    onblur事件处理器(失去焦点)

    onselect事件处理器(选中)

    onchange事件处理器(当且仅当文本框失去焦点时的值与获得焦点的值不同时)

    onkeydown事件处理器(键盘按下)

    onkeypress事件处理器(按了一个键)

    onkeyup事件处理器(键盘抬起)

在输入框中如果要输入密码，则需要用到

如下：

使用密码框的唯一目的是当用户在页面上输入密码的时候，隐藏使用者输入的密码字符串以防止偷窥，但是密码框仅仅是使用星号或其他符号代替显示，并没有对密码进行加密。

当表单提交的时候，仍是以明文发送的，因此，使用密码框来传递重要信息并不是一个安全的方法。

接着是Radio(单选框)和Checkbox(多选框)

Checkbox使用

注意name要放在一起以便统计

Radio使用如下：

这里注意name要是一样的,不然单选的能力就体现不出来了

下面我们将其加入我们的网页中：

就完成了我们制作的第一个简易表单啦

是不是很简单呢，你学会了吗？

执行编辑 | 王梓名

责任编辑 | 于文博