html表单基本内容

原创已于 2022-03-22 20:08:36 修改 · 384 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5

于 2022-03-22 20:07:33 首次发布

本文详细介绍了HTML表单的基本结构和元素，包括输入字段、电子邮件输入、密码输入、单选按钮、复选框、文件上传、下拉选择、文本区域以及提交和重置按钮的用法。同时强调了`<label>`标签与表单元素的配合，以提高用户体验。此外，还提到了易被忽视的`<br>`换行、`<textarea>`文本域和`<select>`选择器。

表单基本内容

1.表单基本标签

<!-- action="url地址，提交表单时执行的运作"  method="提交方式(GET或POST)"  name=""-->
<form action="">
        账号：<input type="text" name="" id=""><br>
        邮箱：<input type="email" name="" id=""><br>
        密码：<input type="password" name="" id=""><br>
        <!-- 单选按钮要设置同一name -->
        性别：男<input type="radio" name="man" id=""> 
              女<input type="radio" name="man" id=""><br>
              <!-- checked为true——首次载入时被选中 -->
        技能：HTML+CSS<input type="checkbox" name="skill" id="" checked="true"> 
              Javascript<input type="checkbox" name="skill" id=""> 
              Php<input type="checkbox" name="skill" id=""> 
              Java<input type="checkbox" name="skill" id=""><br>
        头像：<input type="file" name="" id=""><br>
        现居地：<select>
                    <option value="">浙江</option>
                    <option value="">上海</option>
                    <option value="">广东</option>
                </select><br>
        留言：<textarea name="" id="" cols="30" rows="5"></textarea><br>
        验证码：<input type="text" name="" id=""><img src="img/validate.png" alt=""><br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>

容易忽略的点：换行符br、文本域textarea、选择器select

2.label标签配合使用情况

<label for="account">账号：</label><input type="text" name="" id="account"><br>

上述用于绑定一个表单元素，当点击label标签内容时，浏览器自动将焦点转到对应的id表单元素