html学习笔记表单<form>

Posted 2020-07-14

<label for="username">用户名:</label>//控件id名称
      <input type="text"  name="username" id="username" value="" />

其中，<label>标签的for属性用来是点击文字光标对应相应id的控件。label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该 label标签相关连的表单控件上）。

当用户需要在表单中输入大段文字时，需要用到文本输入域。

<textarea cols="50" rows="50">在这里输入内容...</textarea>

<input>标签中单选框radio的name值一定相同，多选框类型为checkbox。其中checked="checked"表示默认选中。

<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender-man" checked="checked" />
    <label>女</label>
    <input type="radio" value="2"  name="gender-man" />
</form>

下拉框使用<select><option></option></select>标签，其中value中的值是表单提交的值，外面的值为显示的值。

<select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>

下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下Ctrl键+单击

<select multiple="multiple">
      <option value="看书">看书</option>
      <option value="旅游" >旅游</option>
      <option value="运动"  >运动</option>
      <option value="购物" >购物</option>
    </select>

当用户需要提交表单信息到服务器时，需要用到提交按钮。类型为submit，提交到action行为中。当用户需要重置表单信息到初始时的状态时，重置类型为reset。

同时进行