Web前端开发笔记9——表单

1.在使用表单之前，我们先看看它由什么组成。

表单域：一个包含表单元素的区域。在html中使用form标签来定义表单域，以实现用户信息的收集和传递。form会把它范围内的表单元素信息提交给服务器。

<form action="" method="post" name="自定义名字">
    
</form>

2.input表单元素。其中包含一个type属性，可以转换为不同的样式。主要有以下的形式。

• input是一个单标签。
• type属性设置不同的属性值来指定不同的控件类型。

3.input自带的属性如下：

注：

• 在实际操作时可能会遇到radio可以都选上的情况，我们必须确保他们的name属性一致，才可以实现单选的效果。
• 同样我们可以使用默认选择属性即checked属性来实现。

4.label标签为input元素定义标注（标签）。用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上，提升用户体验。

用法如下：

label标签的for属性与相关元素的id属性相同。

5.select下拉列表，由select标签和option标签组成。可以使用selected属性来设置默认选项。

<select id="province">
    <option>jiangsu</option>
    <option selected="selected">beijing</option>
    <option>zhejiang</option>
    <option>guangzhou</option>
</select>

效果如下：

6.textarea文本域标签。一般会使用到的是其cols和rows属性。

<label for="textarea">留言：</label>
<textarea id="textarea" cols="100" rows="10">这是我今天想说的话。</textarea>

效果如下：