526互联

html 5（二）之表单

发布时间 2023-12-14 20:40:59作者: by1314

表单

表单也就是交互区域

<form action="https://www.baidu.com/s" target="_self" method="get">
        <input type="text" name="wd">
        <button>搜索</button>
</form>

<form> 表单标签

  • method：默认值为get，还有 post

<button> 按钮

<input>

<input type="" name="" value="" maxlength="">
常用属性

  1. type：值可以为：text、password、radio(单选框)、checkbox（多选框）、hidden
  • radio
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female" checked> 女

  • 多个** radio 的值**一定要保持一致

  • radio 和 checkbox 一定要写 value 属性

  • 隐藏域：<input type="hidden" name="" value="">

  • 确认按钮：

    • <input type="submit" value="确认"> 按钮千万不要写 name 属性

    • <button type="submit">确认</button>

  • 重置按钮：

    • <input type="reset" value="重置"> 按钮千万不要写 name 属性

    • `

  • 普通按钮：

    • <input type="button" value="普通按钮"> 按钮千万不要写 name 属性
    • `
  1. value：输入框值
  2. maxlength：输入框的最大长度

文本域

<textarea name="" id="" cols="30" rows="10"></textarea>

下拉框

<select name="place">
    <option value="" selected>河北 </option>
  • name：指定数据名称
  • option：展示的是 value，提交的是 option 之间文字
  • selected：默认选中

禁用表单控件 disabled

不希望用户对其进行修改
input、select、button、option、textarea 均可以使用 disabled
例如：<textarea disabled name="" id="" cols="30" rows="10"></textarea>

label 标签

使用标签将表单文字与控件进行关联
写法一：

<label for="passwd">密码</label>
<input id="passwd" type="text" name="password">

写法二：

<label>
密码：
<input id="passwd" type="text" name="password">
</label>

fieldset 和 lengend 对表单信息分类

fieldset 对表单进行分组 ，lengend 分组的标题

<fieldset>
   <lengend>主要信息</lengend>
    <label>
      密码：
      <input id="passwd" type="text" name="password">
   </label>
</fieldset>