HTML（三） -- 表单设计

目录

1.  基本语法

 2.   表单控件

2.1  input控件

input 常用属性：

input type的表单项：

2.2  select 控件

2.3  textarea控件

2.4  label 控件

---

为什么需要表单？

在我们网页中， 无论是提交搜索的信息，还是网上注册等都是需要使用表单。

使用表单目的是为了用户同服务器进行动态的信息交流。

1.  基本语法

HTML 表单是一种允许用户在 Web 页面上输入和提交数据的机制。

<form name="表单名称" method="指定传输方式" action="接纳表单数据地址" 
enctype="传输数据的编码格式">
        表单项、文字、图片等
</form>

表单的常见属性：

属性	属性值	作用
name	名称	用于指定表单的名称，用以区分同一个页面中的多个表单
method	get/post	设置表单数据的提交方式，取值为get或者post
action	url地址	用以指定接收并处理表单数据的服务器程序的url地址；为空则提交给当前页
enctype	MIME type	指定传送数据的编码方式，默认值为application/x-www-form-urlencoded

示例演示：

<form name="aaa" method="post" action="result.html">
    <p>  名字：<input name="name" type="text" >  </p>
    <p>  密码：<input name="pass" type="password" > </p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填"/> 
    </p>
</form>

结果展示：

 2.   表单控件

2.1  input控件

input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息 在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，展示不同的控件（如输入框、密码框、复选框、掩码后的文本控件、单选按钮、按钮等）。

input 常用属性：

属性	属性值	作用
type	value	规定 input 元素的类型。
name	field_name	定义 input 元素的名称
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点。
placeholder	text	在输入域内给浏览者显示一段提示语句
required	required	指示输入字段的值是必需的，不能为空
value	value	规定 input 元素的值
autocomplete	on/off	规定是否使用输入字段的自动完成功能
checked	checked	规定此 input 元素首次加载时应当被选中。
disabled	disabled	当 input 元素加载时禁用此元素。
pattern	regexp_pattern	此属性相当于给input输入域加上验证模式，验证是为正则表达式
maxlength	number	规定输入字段中的字符的最大长度。

input type的表单项：

表单项	作用
<input type="text">	单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符
<input type="password">	密码字段。该字段中的字符被掩码
<input type="submit">	提交按钮，将表单里的信息提交给action所指向的地址
<input type="reset">	定义重置按钮。重置按钮会清除表单中的所有数据
<input type="radio">	定义单选按钮
<input type="checkbox">	定义复选框
<input type="email"	邮件框，具有校验功能
<input type="image">	定义图像形式的提交按钮
<input type="button">	定义可点击按钮，没有任何行为（可通过 JavaScript 启动脚本）
<input type="hidden">	定义隐藏的输入字段
<input type="file">	文件域

示例演示：

<form name="aaa" method="post" action="result.html">
    <p> 名字：<input name="name" type="text" > </p>
    <p> 密码：<input name="pass" type="password" > </p>

    <!--    使用radio时，radio的name属性要一致      -->
    <p>
        性别：<input name="radio" type="radio" checked> 男
             <input name="radio" type="radio" > 女
    </p>

    <!--    使用checkbox时，checkbox的name属性要一致      -->
    <p>
        爱好：<input name="checkbox" type="checkbox" value="ball"> 打球
             <input name="checkbox" type="checkbox" value="swimming"> 游泳
             <input name="checkbox" type="checkbox" value="networkGame"> 网络游戏
             <input name="checkbox" type="checkbox" value="readABook"> 看书
    </p>

    <p> 邮箱：<input name="email" type="email" > </p>

    <p>
    <input type="submit" name="Button" value="提交"/>
    <input type="reset" name="Reset" value="重填"/>
    </p>
</form>

结果展示：

2.2  select 控件

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时， 我们可以使用<select>标签控件定义下拉列表。

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注 ：在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。

示例演示：

<label for="fruits">请选择你喜欢的水果：</label>
    <select name="fruits" id="fruits">
        <option value="" selected = "selected">请选择</option>
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橙子</option>
        <option value="grape">葡萄</option>
    </select>

结果展示：

2.3  textarea控件

<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

<textarea rows="3" cols="20">
  文本内容
</textarea>	

2.4  label 控件

label 元素的特点：

• 不会向用户呈现任何特殊效果。
• 为鼠标用户改进了可用性。 如果您在 label 元素内点击文本，就会触发此控件。 就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
• <label> 标签的 for 属性应当与相关元素的 id 属性相同。

代码演示：

<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />

结果展示：

label 控件的使用效果

 继续学习之路：

HTML（一） -- 基本标签

HTML（二） -- 表格设计

HTML（三） -- 表单设计

HTML（四） -- 多媒体设计

 如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！