在html中,from標籤用於建立供使用者輸入的HTML表單(表單域),以實現使用者資訊的收集和傳遞,form中的所有內容都會提交給伺服器;語法「表單控制項」。 form表單中可包含一個或多個表單元素,例如input、select、textarea。
本教學操作環境:windows7系統、HTML5版、Dell G3電腦。
作用:form標籤用於建立供使用者輸入的HTML表單(表單域),以實現使用者資訊的收集與傳遞,form中的所有內容都會提交給伺服器。
form表單域中可以包含各種互動控制項--控制項標籤(文字欄位、複選框、單選框、提交按鈕等等),例如、、< ; select>、等標籤。
<form action="提交地址" method="提交方式" name="表单名称"> 各种表单控件 </form>
#name:只是給該表單命名,用於js技術使用。
action:設定表單資料提交給哪個文件,用於後端技術(例如php)來接受並處理資料
method : 設定資料提交方式,用於根據不同的資料需求來選擇適當的提交(傳送)方式
#method提交方式常用的4種:
get 一般用来查询信息 post 一般用来新增信息 put 一般用来修改信息 delete 一般用来删除信息
post和get區別:
資料提交方式,get把提交的資料url可以看到,post看不到
get一般用於提交少量數據,post用來提交大量數據
get最多提交1K數據,post理論上沒有限制
get提交的數據在瀏覽器歷史記錄中,安全性不好
一個完整的表單包含三個基本組成部分:表單標籤、表單域、表單按鈕。
1、表單標籤
是指form標籤本身,它是一個包含表單元素的區域,使用定義
2、表單域
是標籤中用來收集使用者輸入的每一項,通常用input標籤來定義,input標籤有不同的類型,對應使用者不同的資料。 (例如:文字網域、下拉清單、單選方塊、複選框等等)
3、表單按鈕
用來提交表單中的所有資訊到伺服器
*表单域和表单按钮都属于表单元素。
單行文字方塊<input type="text" >預設值是type="text"
密碼方塊<input type="password"/> ;
單選按鈕<input type="radio" name=""/>
標籤為單一標籤
type="text"為普通輸入框value為裡面的值name和id會在寫js的時候用##
<form action="url地址" method="提交方式" name="表单名称">
<input type="text" name="" id="" value="你好">
</form>
input標籤的一些屬性:
<table><thead><tr class="firstRow"><th>属性</th><th>属性值</th><th>描述</th></tr></thead><tbody><tr><td>type</td><td>Text</td><td>单行文本输入框</td></tr><tr><td><br/></td><td>Password</td><td>密码输入框</td></tr><tr><td><br/></td><td>Radio</td><td>单选按钮</td></tr><tr><td><br/></td><td>Checkbox</td><td>复选框</td></tr><tr><td><br/></td><td>Button</td><td>普通按钮</td></tr><tr><td><br/></td><td>Submit</td><td>提交按钮</td></tr><tr><td><br/></td><td>Reset</td><td>重置按钮</td></tr><tr><td><br/></td><td>Image</td><td>图像形式的提交按钮</td></tr><tr><td><br/></td><td>File</td><td>文本域</td></tr><tr><td>name</td><td><br/></td><td>空间的名称</td></tr><tr><td>value</td><td><br/></td><td>input控件中的默认文本值</td></tr><tr><td>size</td><td><br/></td><td>input控件在页面中的显示宽度</td></tr><tr><td>checked</td><td><br/></td><td>定义选择空间默认被选中的项</td></tr><tr><td>Maxlength</td><td><br/></td><td>控件允许输入的最多字符数</td></tr></tbody></table><h3><strong>密码框</strong></h3><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><input type="password" name="" id="" value=""></pre><div class="contentsignin">登入後複製</div></div><p><img src="https://img.php.cn/upload/article/000/000/024/506b613f2c6dc265395f785926df2f38-1.png" alt="html中的from標籤有什麼用"/></p><h3><strong>单选框</strong></h3><p><code>name相同的单选框智能选择一个
男 <input type="radio" name="gender" id="" value=""> 女 <input type="radio" name="gender" id="" value="">
多选框可以选取多个
爱好: <br> 抽烟<input type="checkbox" name="hobby" id="" value=""> 喝酒<input type="checkbox" name="hobby" id="" value=""> 烫头<input type="checkbox" name="hobby" id="" value="">
普通按钮可以根据需求来用js添加功能
提交按钮会把输入的表单信息提交到form表单的action地址
重置按钮会把表单信息重置为默认
<form action="url地址" method="提交方式" name="表单名称"> <input type="button" name="" id="" value="我是一个普通按钮"> <input type="submit" name="" id="" value="我是一个提交按钮"> <input type="reset" name="" id="" value="我是一个重置按钮"> </form>
下拉框标签有点特殊,不是input的属性而是一个单独的标签
<select name="省市区" id=""> <option value="">山东</option> <option value="">北京</option> <option value="">江苏</option> <option value="">深圳</option> <option value="">上海</option> </select>
(学习视频分享:web前端入门)
以上是html中的from標籤有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!