HTML基础四

HTML基础四

目录

表单是网页与用户交互的桥梁，是收集用户输入，实现登录注册等功能的核心组件。

本文将介绍表单的一些使用。

一.初识表单<input>

<!--method规定如何发送表单数据。常用值：get|post
    get:可以在URL中看到我们提交的信息，不安全，高效
    post:比较安全，传输大文件
    action:向何处发送
    文本输入框:input type="text"-->
<form method="post" action="result.html">
 <p>名字:<input name="name" type="text"></p>
 <!--密码框:input type="password"-->
 <p>密码:<input name="pass" type="password"></p>
 <p>
   <input type="submit" name="button" value="提交"/>
   <input type="reset" name="reset" value="重填"/>
 </p>
</form>
属性 说明
type 指定元素的类型。text，password，checkbox，radio，submit，reset，file，hidden，image和button，默认为text
name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlength 当type为text或password时，输入的最大字符数
checked 当type为radio或checkbox时，指定按钮是否是被选

二.文本框

<p>
  <input type="text" name="username" value="山东" maxlength="8" size="8"/>
</p>

三.单选框

<!--单选框标签:input type="radio" -->

<p>性别：
 <input type="radio"  value="boy"  name="sex"/>男
 <input type="radio"  value="girl" name="sex" />女
</p>

四.按钮

<!--普通按钮：input type="button"
    图像按钮：input type="button"
    提交按钮：input type="submit"
    重置按钮：input type="reset"-->
<p>按钮:
<input type="button" name="button" value="点击">
</p>

五.多选框

<!--多选框标签:input type="checked" -->
<p>爱好:
 <input type="radio" value="seelp">睡觉
 <input type="radio" value="chat">聊天
 <input type="radio" value="game">游戏
</p>

六.列表框

<p>
<select name="列表名称">
  <option value="选项的值">1</option>
  <option value="选项的值">2</option>
  <option value="选项的值">3</option>
  </select>
</p>

七.文本域<textarea>

<!--cols:行
    rows:列-->
<p>反馈：
  <textarea name="textarea" cols="10" rows="50">文本内容</textarea>
</p>

八.文件域

<!--input type="file" 文件域标签-->
<p>
   <input type="file" name="files">
</p>

九.简单验证

  • 邮件验证
<p>
  <input type="email" name="email">
</p>
  • URL 验证
<p>
  <input type="url" name="url">
</p>
  • 数字验证
<p>
  <input type="number" name="number" max="100" min="10">
</p>

十.滑块和搜索框

滑块

<p>
  <input type="range" name="range">
</p>

搜索框

<p>
  <input type="search" name="search">
</p>

十一.应用

  • 隐藏域<hidden>
<input type="text" name="username" value="山东" hidden>
  • 只读<readonly>
<input type="text" name="username" value="山东" readonly>
  • 禁用<disabled>
<p>性别：
 <input type="radio"  value="boy"  name="sex" disabled/>男
 <input type="radio"  value="girl" name="sex" />女
</p>

无论是简单的表单还是复杂的注册程序，良好的表单设计都可以提升体验。

posted @ 2025-08-08 17:56  Pizrim  阅读(9)  评论(0)    收藏  举报