[HTML]表单基础知识整理

表单三大部分：

1. 表单域：实现用户信息的收集与传递，把它范围内的表单元素信息提交给服务器。　

<form action="url地址" methon="提交方式(GET/POST)" name="表单名称" > 

    表单域

</form>

 

2. 表单控件：又称为表单元素。逐条收集用户信息。

<!-- 单行输入框，maxlength为输入字段的字符最大长度 -->
<input type="text" maxlength="10" value="请输入xx内容"/>


<!-- 密码框，输入内容在前端不可见 -->
<input type="password" name="pwd" id="password" />


<!-- 单选框，通过相同的name值进行多选一，check="checked"表示默认勾选 -->
<input type="radio" name="sex" value="男"/>
<input type="radio" name="sex" value="女" check="checked"/>


<!-- 复选框，通过相同的name值进行多选少，check="checked"表示默认勾选 -->
<input type="checkbox" name="hobby" value="琴"/>
<input type="checkbox" name="hobby" value="棋" check="checked"/>
<input type="checkbox" name="hobby" value="书"/>
<input type="checkbox" name="hobby" value="画" check="checked"/>

<!-- 上传文件 -->
<input type="file" />

<!-- 按钮,配合js使用 -->
<input type="button" onClick="">


<!-- 下拉框 -->
<select>
　　<option>这是一个下拉框</option>
　　<option select="selected">每个option为一个下拉选项</option>
　　<option>select="selected"表示默认勾选</option>
<select>

<!-- 文本域，实际开发中cols（列数为整数）、rows（行数为整数）几乎不使用，使用css进行宽高设置 -->
<textarea cols="20" rows="5" >这是一个文本域</textarea>  

<!-- 提交按钮 -->
<input type="submit" />

<!-- 重置按钮 -->
<input type="reset" />

此外input标签中，type还有image、hidden等取值，暂不表。

check="checked" / select="selected" ，在单选框和下拉框中写多个默认选项，则新值替换旧值，前端显示最后一个默认选项。

 

3.提示信息：label标签可以将提示信息与input标签绑定起来，当点击label标签内的文本时，浏览器自动将焦点转移到对应的表单元素中，以提高用户体验。

　　　　type="input"时，点击label标签，光标自动跳转到输入框中。

　　　　type="radio"或"checkbox"时，点击label标签，自动勾选对应的选项。

<label for="id名称">提示信息</label>
<input id="id名称">某个输入框</input>

 

 

以下为听课笔记：