一、html表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、

标签定义整体的表单区域

action属性定义表单数据提交地址
method属性定义表单提交的方式，一般有“get”方式和“post”方式

2、标签为表单元素定义文字标注

3、标签定义通用的表单元素

type属性：

type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
type="image" 定义图片作为提交按钮，用src属性定义图片地址
type="hidden" 定义一个隐藏的表单域，用来存储值

value属性：定义表单元素的值
name属性：定义表单元素的名称，此名称是提交数据时的键名

4、标签</strong><br> 定义多行文本输入框</p> <p><strong>5、<select>标签</strong><br> 定义下拉表单元素</p> <p><strong>6、<option>标签</strong><br> 与<select>标签配合，定义下拉表单元素中的选项</p> <h1>二、注册表单实例</h1> <h2>1.首先定义一个表单，再来个标题</h2> <pre><code class="html"><h1>注册表单</h1>  <form action="http://www..." method="get"> </code></pre> <p><strong>关于 GET 的注释</strong>：<br> 将表单数据以名称/值对的形式附加到 URL 中<br> URL 的长度是有限的（大约 3000 字符）<br> <strong><em>绝不要使用 GET 来发送敏感数据！</em></strong>（在 URL 中是可见的）<br> 对于用户希望加入书签的表单提交很有用<br> GET 更适用于非安全数据</p> <p><strong>关于 POST 的注释</strong>：<br> 将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）<br> 没有长度限制<br> 通过 POST 提交的表单不能加入书签</p> <h2>2.接下来让用户输入姓名，给出一个单行文本输入框</h2> <pre><code class="html"><div>  <label>姓名：</label><input type="text" name="username" /> </div> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 490px; max-height: 192px;"> <div class="image-view"> </div> </div> <div class="image-caption"> 注册表单姓名.png </div> </div> <p><strong>关于input name属性</strong>：<br> name 属性规定 <input> 元素的名称。<br> name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。<br> <strong>注意</strong>：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。</p> <h2>3.定义一个密码输入框</h2> <pre><code class="html"><div>  <label>密码：</label><input type="password" name="password" /> </div> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 473px; max-height: 222px;"> <div class="image-view"> </div> </div> <div class="image-caption"> 注册表单密码.png </div> </div> <h2>4.定义性别选择</h2> <pre><code class="html"><div> <label>性别：</label>   <input type="radio" name="gender" value="0" /> 男 <input type="radio" name="gender" value="1" /> 女 </div> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 412px; max-height: 282px;"> <div class="image-view"> </div> </div> <div class="image-caption"> 注册表单性别.png </div> </div> <p>这里发现只有点在圆圈上才能选中，为了实现点击文字就能选中的功能，需要引入label的for属性，for属性可把 label 绑定到另外一个元素。</p> <pre><code class="html"><div> <label>性别：</label>  <input type="radio" name="gender" value="0" id="male"/> <label for="male">男</label> <input type="radio" name="gender" value="1" id="female" /> <label for="female">女</label> </div> </code></pre> <p>现在我们直接点击文字就能实现选中效果<br> <strong>注</strong>：for属性的应用需要id属性来配合</p> <h2>5.爱好</h2> <pre><code class="html"><div> <label>爱好：</label>  <input type="checkbox" name="like" value="sing" id="sing"/> <label for="sing">唱歌</label> <input type="checkbox" name="like" value="run" id="run"> <label for="run">跑步</label> <input type="checkbox" name="like" value="swiming" id="swiming"/> <label for="swiming">游泳</label> </div> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 470px; max-height: 86px;"> <div class="image-view"> </div> </div> <div class="image-caption"> 注册表单爱好.png </div> </div> <br> <p>这里同样使用了上面的for属性</p> <h2>6.上传照片</h2> <pre><code class="html"><div>  <label>照片：</label> <input type="file" name="person_pic"> </div> </code></pre> <div class="image-package"> <div class="image-container" style="max-width: 438px; max-height: 91px;"> <div class="image-view"> </div> </div> <div class="image-caption"> 注册表单上传文件.png </div> </div> <br> <p>暂时还不知道怎么显示上传的照片，或者限制上传文件的大小</p> <h2>7.个人描述</h2> <pre><code class="html"><div>  <label>个人描述：</label> <textarea name="about">

Python笔记:HTML和CSS 7.3——表单标签

一、html表单

8.籍贯

9.提交和重置按钮

10.大功告成

你可能感兴趣的:(Python笔记:HTML和CSS 7.3——表单标签)