欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

表单

最编程 2024-07-20 20:14:38
...
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <form action="target.html">
      <fieldset>
        <legend>用户信息</legend>
        <label for="um">用户名</label>
        <input id="um" type="text" name="username" /> <br />
        <br />
        <label for="pwd">密码</label>
        密码<input id="pwd" type="password" name="password" /> <br />
        <br />
      </fieldset>
      <fieldset>
        <legend>用户爱好</legend>
        性别<input type="radio" name="gender" value="male" id="male" /><label
          for="male"
          >男</label
        >
        <input
          type="radio"
          name="gender"
          value="female"
          checked="checked"
          id="female"
        />
        <label for="female">女</label> <br />
        <br />
        爱好 <input type="checkbox" name="hobby" value="zq" />足球
        <input type="checkbox" name="hobby" value="lq" />篮球
        <input
          type="checkbox"
          name="hobby"
          value="zmq"
          checked="checked"
        />羽毛球
        <input
          type="checkbox"
          name="hobby"
          value="ppq"
          checked="checked"
        />乒乓球 <br />
        <br />
      </fieldset>
      你喜欢的明星
      <select name="star">
        <optgroup label="女明星">
          <option value="fbb">范冰冰</option>
          <option value="lxr">林心如</option>
          <option value="zw">赵薇</option>
        </optgroup>

        <optgroup label="男明星">
          <option value="lxr">林心如</option>
          <option value="zbs" selected="selected">赵本山</option>
          <option value="ldh">刘德华</option>
          <option value="pcj">潘长江</option>
        </optgroup>
      </select>
      <br />
      <br />

      自我介绍<textarea name="info"></textarea>

      <br />
      <br />
      <input type="submit" value="注册" />
      <input type="reset" />
      <input type="button" value="按钮" />
      <br />
      <br />
      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按钮</button>
    </form>
  </body>
</html>

web前端-html-css-form表单

1. 表单的作用

  1. 表单的作用就是用来将用户信息提交给远程服务器的
  2. 比如：
    • 百度的搜索框
    • 注册 登录这些操作都需要填写表单

2. 创建一个表单

<form action="target.html"></form>
  1. 使用 form 标签来创建一个表单
  2. form 标签中必须制定一个 action 属性，该属性指向的是一个服务器的地址
    • 当我们提交表单时将会提交到 action 属性对应的地址
  3. 使用 form 创建的仅仅是一个空白的表单，
    • 我们还需要向 from 中添加不同的表单项

3. 表单的各个标签(表单项)

1) fieldset 分组

  1. 在表单中可以使用 fieldset 来为表单项进行分组，
  2. 可以将表单项中的同一组放到 fieldset 中
<fieldset></fieldset>

2) legend 组名

在 fieldset 中可以使用 legend 子标签，来指定组名

<legend>用户信息</legend>

3) label 提示文字

  1. 在 html 中为我们提供了一个标签，专门用来选中表单中的提示文字的 label 标签
  2. 该标签可以指定一个 for 属性，该属性的值需要指定一个表单项的 id 值
<label for="um">用户名</label> <input id="um" type="text" name="username" />

4) input 文本框

  1. 使用 input 来创建一个文本框，它的 type 属性是 text
  2. 如果希望表单项中的数据会提交到服务器当中，还必须给表单项指定一个 name 属性 - name 表示提交内容的名字
<input id="um" type="text" name="username" />
①密码框

使用 input 创建一个密码框，它的 input 属性值是 password

<input id="pwd" type="password" name="password" />
②单选按钮
  1. 使用 input 来创建单选按钮,它的 type 属性使用 radio
  2. 单选按钮通过 name 属性进行分组，name 属性相同的是一组按钮
  3. 像这种需要用户选择但是不需要用户直接填写内容的表单项， - 还必须指定一个 value 属性，这样被选中的表单项的 value 属性值将会最终被提交给服务器
  4. 如果需要单选按钮或者多选框中指定默认选中的选项， - 则可以在希望选中的属性中添加 checked="checked"属性
性别<input type="radio" name="gender" value="male" id="male" /><label for="male"
  >男</label
>
<input
  type="radio"
  name="gender"
  value="female"
  checked="checked"
  id="female"
/>
<label for="female">女</label>
③多选框

使用 input 创建一个多选框，它的 type 属性使用 checkbox

爱好 <input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />篮球
<input type="checkbox" name="hobby" value="zmq" checked="checked" />羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked" />乒乓球

5) select 下拉列表

  1. 下拉列表的 name 属性需要指定给 select，而 value 属性需要指定给 option
  2. 可以通过在 option 中添加 selected="selected"来将选项设置为默认选中
  3. 当为 select 添加一个 multiple=“multiple”，则下拉列表变为一个多选的下拉列表
你喜欢的明星
<select name="star"></select>

6) optgroup 选项分组

  1. 在 select 中可以使用 optgroup 对选项进行分组 - 同一个 optgroup 中的选项是一组
  2. 可以通过 label 属性来指定分组的名字
<optgroup label="女明星">
  <option value="fbb">范冰冰</option>
  <option value="lxr">林心如</option>
  <option value="zw">赵薇</option>
</optgroup>

<optgroup label="男明星">
  <option value="zbs" selected="selected">赵本山</option>
  <option value="ldh">刘德华</option>
  <option value="pcj">潘长江</option>
</optgroup>

7) option 下拉列表项

在下拉列表中使用 option 标签来创建一个一个列表项

<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">赵薇</option>

8) textarea 文本域

使用 textarea 创建一个文本域

自我介绍<textarea name="info"></textarea>

9) 提交(submit 提交 reset 重置)

  1. 用户填写的信息会附在 url 地址的后面以查询字符串的形式发送给服务器 - url 地址?查询字符串
  2. 格式：属性名=属性值&属性名=属性值属性名=属性值&属性名=属性值&属性名=属性值
  3. 在文本框中也可以指定 value 属性值，该值将会作为文本框的默认值显示

10) submit 提交

  1. 提交按钮可以将表单中的信息提交给服务器 - 使用 input 创建一个提交按钮，它的 type 属性值是一个 submit
  2. 在提交按钮中可以通过 value 来制定按钮上的文字
<input type="submit" value="注册" />

11) reset 重置

  1. reset 可以创建一个重置按钮
  2. 点击重置按钮以后表单中的内容将会恢复默认值
<input type="reset" />

12) button 按钮

  1. 使用 input type=button 可以用来创建一个单纯的按钮
  2. 这个按钮没有任何功能，只能被点击
<input type="button" value="按钮" />
  1. 除了使用 input，也可以使用 button 标签来创建按钮
  2. 这种方式和 input 类似，只不过由于它是成对出现的标签， - 使用起来更加的灵活
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

上一篇： 在SSM架构中，如何轻松完成表单数据的提交？

下一篇： 如何使用HttpClient模仿x-www-form-urlencoded形式的表单提交过程

推荐阅读