HTML003——表单Form

最新推荐文章于 2023-07-14 19:00:42 发布

fabuler

最新推荐文章于 2023-07-14 19:00:42 发布

阅读量359

点赞数

分类专栏： HTML学习备忘

本文链接：https://blog.csdn.net/zyl_android_apk/article/details/8498211

版权

HTML学习备忘专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先添加

<form id="form2" name="form2" method="post" action="">

单行文本域

<form id="form1" name="form1" method="post" action="">
  <label>单行文本域
    <input type="text" name="textfield" id="textfield" />
  </label>
</form>

多行文本域

<form id="form3" name="form3" method="post" action="">
  <label>多行文本域
    <textarea name="textarea" id="textarea" cols="45" rows="5">文本内容</textarea>
  </label>
</form>

密码文本域

<form id="form4" name="form4" method="post" action="">
  <label>密码文本域
    <input name="textfield2" type="password" id="textfield2" value="" />
  </label>
</form>

隐藏域（对提交内容有一定的安全隐蔽作用，在设计过程中被大量应用）

<form id="form5" name="form5" method="post" action="">
  <input name="hiddenField" type="hidden" id="hiddenField" value="我是隐藏域" />
</form>

单选按钮组

<form id="form7" name="form7" method="post" action="">
  <p>
    <label>
      <input name="RadioGroup1" type="radio" id="RadioGroup1_0" value="man" checked="checked" />
      男</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="woman" id="RadioGroup1_1" />
      女</label>
    <br />
  </p>
</form>

复选按钮框

<form id="form8" name="form8" method="post" action="">
  <p>
    <label>
      <input type="checkbox" name="复选框组1" value="music" id="复选框组1_0" />
      音乐</label>
    <br />
    <label>
      <input type="checkbox" name="复选框组1" value="movie" id="复选框组1_1" />
      电影</label>
    <br />
    <label>
      <input type="checkbox" name="复选框组1" value="travel" id="复选框组1_2" />
      旅游</label>
    <br />
  </p>
</form>

菜单

<form id="form9" name="form9" method="post" action="">
  <label>菜单
    <select name="select" id="select">
      <option value="one">第一个</option>
      <option value="two">第二个</option>
      <option value="three">第三个</option>
      <option value="four">第四个</option>
    </select>
  </label>
</form>

列表

<form id="form10" name="form10" method="post" action="">
  <label>列表
    <select name="select2" size="5" id="select2">
      <option value="one">第一个</option>
      <option value="two">第二个</option>
      <option value="three">第三个</option>
      <option value="four">第四个</option>
    </select>
  </label>
</form>

跳转菜单

<form id="form11" name="form11" method="post" action="">
  <select name="jumpMenu" id="jumpMenu" οnchange="MM_jumpMenu('parent',this,0)">
    <option value="http://www.baidu.com">百度一下</option>
    <option value="http://www.qq.com">腾讯QQ</option>
  </select>
</form>

按钮

<form id="form12" name="form12" method="post" action="">
  <label>提交
    <input type="submit" name="button" id="button" value="提交" />
  </label>
</form>

图像域

<form id="form13" name="form13" method="post" action="">
  <label>图像域
    <input type="image" name="imageField" id="imageField" src="aaaa.jpg" />
  </label>
</form>

文件域

<form action="" method="post" enctype="multipart/form-data" name="form14" id="form14">
  <label>打开文件
    <input type="file" name="fileField" id="fileField" />
  </label>
</form>

字段集

<form id="form15" name="form15" method="post" action="">
  <fieldset>
    <legend>个人信息</legend>
    <p>
      <label>哈哈
        <input type="text" name="textfield3" id="textfield3" />
      </label>
    </p>
    <p>
      <label>嘻嘻
        <input type="text" name="textfield4" id="textfield4" />
      </label>
    </p>
    <p>
      <label>嘿嘿
        <input type="text" name="textfield5" id="textfield5" />
      </label>
    </p>
  </fieldset>
  
</form>