html_控件一

1. input标签：

<input> 用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

 

2. 单行文本

<br />

公司名：

<input type="text" name="company" readonly="true" value="格伦有限公司" />

<br />

用户名：

<input type="text" name="username" maxlength="6" />

<br />

密    码：

<input type="password" name="password" />

 

 

3. 文本域

<h2>文本域</h2>

<textarea rows="5" cols="20"></textarea>

20列之后会自动换行

4. 单选框

<input type="radio" name="sex" />男

<input type="radio" name="sex" />女

<input type="radio" name="sex" />女博士

Type为radio即为单选按钮，name相同的单选按钮为一组，选择时互斥。

5. 复选框

<h2>复选框</h2>

爱好: <br />

<input type="checkbox" />旅游

<input type="checkbox" />看电影

<input type="checkbox" />学习

6. Label

    label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。

    就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上<label> 标签的 for 属性应当与相关元素的id 属性相同。

    具例来说，上面的复选框只有点方框才能打钩，点文字是没有反映的，如果希望点文字也达到钩选的效果，就需要使用label把文字包起来，而且使用for属性和方框关联起来：

<h2>label</h2>

可点击文字选中: <br />

<input type="checkbox" id="trip"/><label for="trip">旅游</label>

<input type="checkbox" id="movie"/><label for="movie">看电影</label>

<input type="checkbox" id="study"/><label for="study">学习</label>

7. 文件域

<h2>文件域</h2>

任意文件：<input type="file"/>

<br />

单频视频：<input type="file" name="res" accept="audio/*,video/*" />

<br />

图片文件：<input type="file" name="pic" accept="image/*" />

audio/* 可以接受所有的音频文件

video/* 可以接受所有的视频文件

image/* 可以接受所有的图片文件