HTML表单中常见元素的使用

HTML 表单用于搜集不同类型的用户输入。在HTML的表单中，常见的有以下控件：

文本框(text)、密码框(password)、单选按钮（radio)、复选框(checkbox）等...

下面就来解释它们是如何使用的吧。

1.表单的开始

表单的标签名为：<form>...</form>

在使用表单控件时，需加上form标签来一起使用。

2.表单如何添加控件

当我们想在表单中添加一个文本框，或者按钮时，我们应该先使用<input type="控件属性">来使用它们，添加文本框的效果如下图。

我在此处添加了两个文本框

3.其他的表单控件

单选按钮:<input type="radio value="Male" >  Male

value=“Male"表示此单选按钮的参数为Male.

多个单选按钮:<input type="radio" value="Male" name="sex"  checked>Male

<input type="radio" value="Female  name="sex">Female

其中name属性表示给按钮命名,当同样名称的单选按钮出现时，才不会发生都能选中的情况。

checked属性表示默认选中。

复选框：<input type="checkbox" name="1">I have a bike

<input type="checkbox" name="1">I have a car

复选框跟单选按钮用法类似，然后都可以使用name、checked、value等属性

提交按钮：<input type="submit" value="submit">

这表示一个提交按钮

在提交按钮中：含有action、method等属性。

action表示提交表单时执行的动作，通常，表单被提交到web服务器上的网页

method属性规定在提交表单时所用的HTTP方法（get（默认为get)或post)

当使用get时，表单数据在浏览器地址栏中可见，适合少量数据的提交。

如果表单正在使用敏感数据时（如密码），常常使用post，因为post提交的数据不可见。

下拉列表：<select>

下拉列表的标签名为<select>

他的使用方法为：<select name="爱好">

<option value="1">运动</option>

<option value="2">旅游</option>

<option value="3">看电影</option>

</select>

其中，option标签表示定义下拉列表的值，它也可以使用name属性和checked属性。

button元素:<button type="button">

详细使用:<button type="button" onclick="alert('你好')">点击我</button>

其中，onclick表示单击事件，alert表示会弹出提示框('提示的值')。

在表单中，还有很多未列出的控件元素，他们各自有各自的特色，但是用法大致都相同。在此就不一一列出了。欢迎各位读者老爷指出不足之处共同学习。