<form></form>表单

21fanqie

<form></form>表单

语法：<form   method="传送方式"   action="服务器文件">

讲解：

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方，比如一个PHP页面(save.php)。

3.method ： 数据传送的方式（get/post）。

<form method="post" action="save.php">  
        <label for="username">用户名:</label>  
        <input type="text" name="username" id="username" value="" />  
        <label for="pass">密码:</label>  
        <input type="password" name="pass" id="pass" value="" />  
        <input type="submit" value="确定" name="submit" />  
        <input type="reset" value="重置" name="reset" />
    </form>

解释：

1. <form method="post" action="save.php">

复制代码

    这行代码定义了一个表单。method="post"指定了表单数据将通过HTTP POST方法发送到服务器。action="save.php"指定了当表单提交时，数据将被发送到的服务器端脚本的URL。

1. <label for="username">用户名:</label>
   

复制代码

    这行代码定义了一个标签（label），用于标识和关联表单中的输入字段。for="username"属性指定了这个标签与ID为"username"的输入字段相关联。点击这个标签时，浏览器会自动将焦点移至对应的输入字段。for属性和id属性相对应。

1. <input type="text" name="username" id="username" value="" />

复制代码

    这行代码定义了一个文本输入框，允许用户输入文本。type="text"指定了输入框的类型为文本。name="username"定义了当表单提交时，这个输入字段的值将作为名为"username"的参数发送给服务器。id="username"为这个输入框指定了一个唯一的标识符，以便与上面的<label>标签相关联。value=""是输入框的初始值，这里为空字符串，意味着输入框默认是空的。for属性和id属性相对应。

1. <label for="pass">密码:</label>

复制代码

     类似于上面的用户名标签，这行代码定义了一个用于密码输入字段的标签。for="pass"属性指定了这个标签与ID为"pass"的输入字段相关联。for属性和id属性相对应。

1. <input type="submit" value="确定" name="submit" />

复制代码

     这行代码定义了一个提交按钮，用于提交表单。type="submit"指定了按钮的类型为提交按钮。点击这个按钮时，表单中的数据将被发送到action属性指定的URL（在本例中是"save.php"）。value="确定"定义了按钮上显示的文本。name="submit"为这个按钮指定了一个名称，这样在服务器端脚本中就可以通过这个名字来识别这个按钮是否被点击。

1. <input type="reset" value="重置" name="reset" />

复制代码

     这行代码定义了一个重置按钮，用于将表单中的所有输入字段重置为它们的初始值。type="reset"指定了按钮的类型为重置按钮。value="重置"定义了按钮上显示的文本。name="reset"为这个按钮指定了一个名称，虽然在这个特定的场景下，重置按钮的名称通常不是必需的，但指定名称有时可以帮助在服务器端进行调试或日志记录。

注意:
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。

21fanqie

文本输入框、密码输入框、数字输入框

语法：
<form>
   <input type="text/password/number/url/email" name="名称" value="文本"  placeholder="请输入关键字">/>
</form>
解释：
1、type：
   当type="text"时，输入框为文本输入框;
   当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
4、placeholder属性：
  （1）placeholder属性为输入框占位符，里面可以放提示的输入信息。
  （2）placeholder属性的值可以任意填写，当输入框输入内容时，占位符内容消失，输入框无内容时,占位符内容显示。
  （3）占位符内容不是输入框真正的内容。
5、number：
  （1）input的type属性设置为number,则表示该输入框的类型为数字。
  （2）数字框只能输入数字，输入其他字符无效。
  （3）数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。
6、url：
则表示该输入框的类型为网址
以http://或者https://开头，且后面必须有内容，否则表单提交的时候会报错误提示。
7、email：
邮箱框
  （1）Input的type属性设置为email,则表示该输入框的类型为邮箱。
  （2）数字框的值必须包含@。
  （3）数字框的值@之后必须有内容,否则会报错误提示。

<form>
  姓名：
  <input type="text" name="myName" placeholder="姓名">
  <br/>
  密码：
  <input type="password" name="pass"  placeholder="密码">
  数字：
  <input type="number" name="number"  placeholder="数字">
  网址：
  <input type="url" name="url"  placeholder="输入网址">  <!--输入框中的内容必须以http://或者https://开头-->
  邮箱：
  <input type="email" name="email"  placeholder="输入邮箱"> 
</form>

21fanqie

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：

1. <textarea  rows="行数" cols="列数">文本</textarea>

复制代码

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。

举例：

<form  method="post" action="save.php">
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

21fanqie

label标签
       不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法：

1. <label for="控件id名称">

复制代码

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

例子：

<form
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

使用<label>标签在HTML表单中是非常重要的，因为它提供了多个好处，主要包括提高无障碍性（Accessibility）、改进用户体验（UX）以及增强表单的语义性。

                               
登录/注册后可看大图

使用label标签的好处：
提高无障碍性（Accessibility）：
对于使用屏幕阅读器等辅助技术的用户来说，<label>标签至关重要。屏幕阅读器能够识别<label>元素并将其内容与相应的表单控件（如<input>、<select>等）关联起来。这样，当用户点击或聚焦到表单控件时，屏幕阅读器会读出相应的标签文本，帮助用户理解他们正在交互的内容。
如果没有<label>标签，或者<label>标签没有正确与表单控件关联（通常是通过for属性和控件的id属性），那么辅助技术可能无法正确地向用户传达控件的用途，从而降低了表单的无障碍性。
改进用户体验（UX）：
点击<label>标签时，如果它正确地与表单控件相关联（同样是通过for属性和id属性），那么点击标签的行为将自动将焦点移至关联的控件上。这种“点击即聚焦”的行为提高了表单的可用性，因为用户不需要精确地点击控件本身，只需点击其旁边的标签即可。
对于移动设备和触摸屏界面来说，这种改进尤其重要，因为精确点击控件可能比较困难。
增强表单的语义性：
<label>标签增强了HTML文档的语义性，使得表单的结构更加清晰、易于理解。对于开发人员、搜索引擎爬虫以及其他自动化工具来说，这种语义化的标记使得表单的意图和控件的用途更加明确。
语义化的HTML也有助于未来的维护和扩展，因为其他开发者或未来的你能够更容易地理解表单的结构和功能。
表单验证和样式：
在一些情况下，<label>标签还可以用于表单验证的提示信息，或者通过CSS进行样式化，以改善表单的外观和感觉。虽然这些用途不是<label>标签的主要目的，但它们展示了标签在表单设计中的多功能性。
综上所述，使用<label>标签是创建可访问、用户友好且语义化的HTML表单的关键步骤之一。

21fanqie

单选框、复选框，让用户选择

语法：

1. <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

复制代码

1、type:
   当 type="radio" 时，控件为单选框
   当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中


举例：

<!DOCTYPE html>  
<html>  

<head>  
    <meta charset="UTF-8">  
    <title>单选框、复选框</title>  
</head>  

<body>  
    <form action="save.php" method="post">  
        <label>性别:</label>  
        <label for="gender-male">男</label>  
        <input type="radio" value="1" id="gender-male" name="gender" />  
        <label for="gender-female">女</label>  
        <input type="radio" value="2" id="gender-female" name="gender" />  
    </form>  
</body>  

</html>

说明：单选按钮应该属于同一组，以便用户只能从中选择一个选项。这通常通过给这些单选按钮设置相同的name属性来实现。

21fanqie

使用select、option标签创建下拉菜单

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>select下拉框</title>
</head>

<body>
    <form>
        <select>
            <option value="看书">看书</option>
            <option value="旅游" selected="selected">旅游</option>
            <option value="运动">运动</option>
            <option value="购物">购物</option>
        </select>
    </form>
</body>

</html>

讲解：
1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。
2、select标签里面只能放option标签，表示下拉列表的选项。
3、option标签放选项内容，不放置其他标签。
4、value：

5、selected="selected"：

设置selected="selected"属性，则该选项就被默认选中。

21fanqie

提交按钮

语法：

1. <input   type="submit"   value="提交">

复制代码

type：只有当type值设置为 "submit" 时，按钮才有提交作用
value：按钮上显示的文字

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>提交按钮</title>
</head>

<body>
    <form method="post" action="save.php">
        <label for="myName">姓名：</label>
        <input type="text" value=" " name="myName " />
        <input type="submit" value="提交" name="submitBtn" />
    </form>
</body>

</html>

21fanqie

重置按钮

语法：

1. <input type="reset" value="重置">

复制代码

type：只有当type值设置为 "reset" 时，按钮才有重置作用
value：按钮上显示的文字

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>重置按钮</title>
</head>

<body>
    <form action="save.php" method="post">
        <label>爱好:</label>
        <select>
            <option value="看书">看书</option>
            <option value="旅游" selected="selected">旅游</option>
            <option value="运动">运动</option>
            <option value="购物">购物</option>
        </select>
        <input type="reset" value="重置" />
        <input type="submit" value="提交" />
    </form>
</body>

</html>