html--form表單常用操作

form表單

用于收集用戶信息,如:登錄、注冊等場景;所有要提交的數據都必須放在form標簽中<form action=" " method=" ">
action:提交地址、動作,與input標簽中type標簽的submit屬性相關聯。 <input type="submit" value="提交" />,提交地址是action的地址
method:提交方法,有get和post兩種提交方法。
get方法:提交數據可以再URL中看見,
例如:
(1)以http://reg.email.163.com/unireg/call.do?cmd=register.entrance&from=126mail傳遞參數
(2)URL長度有限制,所以傳遞的參數數據就有限制
(3)由于數據可以看見,所以不安全
(4)網頁默認的請求是get

post方法:

  1. 將form data 保存在http的請求體
  2. 沒有長度限制
  3. 安全的
  4. 往往在開發中用于提交數據form表單提交post
  5. 文件上傳 method = post enctype=multipart/form-data

input標簽:輸入框,是表單中最重要的部分
name:指定名字,因為提交的是鍵值對,所以必須要指定名字,否則無法提交,即使提交了也沒有意義
value:文本框的內容,一般用在不能輸入的類型中,如改變按鈕的名字等。
placeholder:占位內容,通常用于提示:

<input type="text" name="emailId" placeholder="輸入賬號" />

在這里插入圖片描述
readonly:只讀模式,設置后無法修改輸入框的內容

disabled:禁用狀態 
  在這里插入圖片描述
size:由于輸入框是單行的,所以只能設置寬度
maxlength:限制輸入框最大輸入的字符個數

type屬性:
text:普通文本,標簽的默認屬性時text ,通常如輸入用戶名用的是text
passworld:密文文本,輸入的內容不顯示。如密碼輸入框
submit:提交按鈕。上文提到過,要與action一起用。
radio:單選框,多個關聯選項name屬性要一致,需要設置value,默認選中用checked設置
<labke for=""></lable>:用于關聯單選按鈕與文字。

性別:<input type="radio" name="sex" value="0" id="nan"/><label for="nan"></label>
<input type="radio" name="sex" value="1" id="nv"/><label for="nv"></label><br/>

CheckBox:復選框,屬性與單選框類似

愛好:<input type="checkbox" name="like" value="sport" id="1"/><label for="1">運動</label><input type="checkbox" name="like" value="music"id="2"/><label for="2">音樂</label><input type="checkbox" name="like" value="song" id="4"/><label for="4">唱歌</label><input type="checkbox" name="like" value="games" id="5"/><label for="5">游戲</label><br/>

file:文件上傳,需要進行配套設置。提交方法需要用post
hidden:隱藏字段,該字段根普通字段一樣,但是不會在頁面上顯示

<input type="hidden" name="csrf_hidden" value="hdsuifhudsifhsdoi">

除了輸入框外常用的還有下拉選擇框和文本域
select:下拉選擇框 
屬性name需要設置   
size:可以設置高度(選項個數)
每個選項都是一個option,必須指定value,默認選中使用屬性selected

籍貫:<select name="from"><option value="bj">北京</option><option value="sh">上海</option><option value="gz">廣州</option><option value="sz">深圳</option></select><br/>

textarea:文本域。
說明:可以輸入多行文本
屬性:
cols:列數(寬度)
rows:行數(高度)
注意:不要在標簽書寫任何多余的內容

簡介:<textarea name="intro" cols="20" rows="5"></textarea><br/><input type="submit" value="注冊"><br/>

例子:

為了對齊方便使用table表格標簽來輔助對齊。

<html><head><meta charset="utf-8"><title></title></head><body background="timg.jpg"><h1>還沒有賬號?趕緊注冊一個吧!</h1><form><table width="500px" heigth="300px" border="0" bordercolor="red" align="center"cellspacing="0" cellpadding="0">
<tr><td align="right" padding="0">電子郵箱:</td><td align="left" padding><input type="text" name="emil" placeholder="請輸入:"/><br/></td>
</tr>
<tr><td></td><td>您可以使用<a href="#">郵箱</a>或者<a href="#">手機號</a>注冊  <br/></td>
</tr>
<tr><td align="right">創建密碼:</td><td><input type="password" name="pwd"></td>
</tr>
<tr><td align="right">真實姓名:</td><td><input type="text" name="name" placeholder="請輸入:"/></td>
</tr>
<tr><td align="right">性別:</td><td><input type="radio" name="sex" value="0" id="nan"/><label for="nan"></label><input type="radio" name="sex" value="1" id="nv"/><label for="nv"></label></td>
</tr>
<tr><td align="right">生日:</td><td><input type="date" name="date"/><br/></td>
</tr>
<tr><td align="right">我現在:</td><td><input type="radio" name="work" value="school"/>正在上學<input type="radio" name="work" value="worker"/>已經工作<input type="radio" name="work" value="other"/>其他</td>
</tr>
<tr><td align="right"> 現居地:</td><td><input type="text" name="address" placeholder="請輸入:"/></td>
</tr>
<tr><td></td><td><input type="checkbox" name="name" value="agree"/>同意<a href="#">服務條款</a></td>
</tr>
<tr><td></td><td><input type="submit" value="立即注冊"/></td>
</tr></table></form>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249940.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249940.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249940.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

MySQL觸發器(轉載)

觸發器&#xff08;trigger&#xff09;是數據庫中的一個很重要的、很實用的基于事件的處理器&#xff0c;在處理一些業務需求的時候&#xff0c;使用觸發器會很方便。似乎在《高性能MySQL》中&#xff0c;對觸發器作了一定的描述&#xff0c;也提到使用中的一些優勢和局限性&a…

神級bug解決方法

真的是神級bug,util包中的Arrays類導入不了&#xff0c;一直報錯。原因&#xff1a;JDK 1.8和Myeclipse 8.5不兼容&#xff0c;導致java.util.Arrays類無法被編譯。所以報錯。解決方法&#xff1a;1.降低jdk版本。2.升高Myeclipse版本轉載于:https://www.cnblogs.com/yanlongw/…

es6注意點

補救方法&#xff1a; 詳情&#xff1a;http://es6.ruanyifeng.com/#docs/array 取出文本內容 實現深拷貝 jq實現不完全深拷貝 jQuery.extend jQuery.fn.extend function () {var options, name, src, copy, copyIsArray, clone,target arguments[0] || {},i 1,length ar…

input標簽用法解讀

HTML5/HTML中標簽用法解讀 OK&#xff01;今天博主為小伙伴們介紹的內容是HTML5/HTML中標簽的用法&#xff0c;&#xff0c;&#xff0c; &#xff0c;emmm圖文并茂哦&#xff01; 下面正式開始內容的介紹&#xff1a;首先&#xff0c;直觀上說標簽規定了用戶可以在其中輸入數據…

SpringBoot項目遇到的一些問題

SpringBoot項目整合JPA報錯轉載于:https://www.cnblogs.com/xb1223/p/10195054.html

關于SpringBoot中的多數據源集成

引言 其實對于分庫分表這塊的場景&#xff0c;目前市場上有很多成熟的開源中間件&#xff0c;eg&#xff1a;MyCAT&#xff0c;Cobar&#xff0c;sharding-JDBC等。 本文主要是介紹基于springboot的多數據源切換&#xff0c;輕量級的一種集成方案&#xff0c;對于小型的應用可…

實現vue2.0響應式的基本思路

注意&#xff0c;這里只是實現思路的還原&#xff0c;對于里面各種細節的實現&#xff0c;比如說數組里面數據的操作的監聽&#xff0c;以及對象嵌套這些細節本實例都不會涉及到&#xff0c;如果想了解更加細節的實現&#xff0c;可以通過閱讀源碼 observer文件夾以及instance文…

HTML標簽類型及特點

一、 概述 HTML&#xff08;Hyper Text Markup Language &#xff09;作為一種標記語言&#xff0c;網頁所有的內容均書寫在標簽內部&#xff0c;標簽是組成Html頁面的基本元素&#xff0c;因此對標簽特性的理解在HTML的學習過程中比較重要。 二、基本分類 HTML中的標簽從閉…

打開頁面

*<a href"javascript:void(0)" title"google" οnclick"window.parent.addTab(, 測試, Admin/UserRole, 100000)">測試444</a>*轉載于:https://www.cnblogs.com/niyl/p/10196528.html

python 大量使用json 存儲數據時,格式化輸出的方式

import json, pprintdic {name: 234, user_name: yan xia ting yu , list: [ds, a, 2], 你好這是鍵: 檐下聽雨}print(dic)pprint.pprint(dic)print(json.dumps(dic))print(json.dumps(dic, indent2))# {name: 234, user_name: yan xia ting yu , list: [ds, a, 2], 你好這是鍵…

vue computed 源碼分析

我們來看看computed的實現。最簡單的一個demo如下&#xff1a; <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> </head> <body> <div id"app"><div name"test&…

軟件開發文檔整理(之)一張示意圖 | 清晰明了

在整個軟件開發周期&#xff0c;開發文檔是必不可少的資料&#xff0c;它們貫穿于整個開發周期&#xff0c;用來評估計劃、規劃進度、項目管理、軟件測試、軟件發布&#xff0c;可以說至關重要。 ??開發文檔必須歸檔&#xff0c;沒有歸檔的文檔作用大打折扣&#xff0c;時效性…

java大數BinInteger

當我們遇到long不行的時候就要考慮這個BinInteger了&#xff0c;因為這是只要你內存夠大&#xff0c;就能輸入很大的數&#xff0c;用這個處理高精度問題&#xff0c;是很容易的一件事&#xff0c;對于我這剛學java的萌新來說&#xff0c;長見識了&#xff0c;確實比C方便 BigI…

HTML頁面提交TABLE

在HTML頁面里&#xff0c;提交一個TABLE需要把TABLE的值傳入變量或json格式&#xff0c;然后submit到服務端的。 思路描述&#xff1a;將table里的值取出&#xff0c;放在json中&#xff0c;賦給一個input&#xff0c;通過一個input來實現table表數據提交到服務器&#xff0c;就…

生成條形碼

https://packagist.org/packages/picqer/php-barcode-generator轉載于:https://www.cnblogs.com/pansidong/p/9334224.html

3.GDScript(1)概覽

GDScript 是上面提到的用于Godot的主要語言。和其他語言相比&#xff0c;它與Godot高度整合&#xff0c;有許多優點&#xff1a; 簡單&#xff0c;優雅&#xff0c;設計上為Lua、Python、Squirrel等語言用戶所熟悉。加載和編譯速度飛快。編輯器集成非常令人愉快&#xff0c;有節…

Web 前端框架分類解讀

Web前端框架可以分為兩類&#xff1a; JS的類庫框架 JQuery.JS Angular.JS&#xff08;模型&#xff0c; scope作用域&#xff0c;controller&#xff0c;依賴注入&#xff0c;MVVM&#xff09;&#xff1a;前端MVC Vue.JS&#xff08;MVVM&#xff09;***** Reat.JS &…

async / await對異步的處理

雖然co是社區里面的優秀異步解決方案&#xff0c;但是并不是語言標準&#xff0c;只是一個過渡方案。ES7語言層面提供async / await去解決語言層面的難題。目前async / await 在 IE edge中已經可以直接使用了&#xff0c;但是chrome和Node.js還沒有支持。幸運的是&#xff0c;b…

《SQL Server 2008從入門到精通》--20180717

目錄 1.觸發器1.1.DDL觸發器1.2.DML觸發器1.3.創建觸發器1.3.1.創建DML觸發器1.3.2.創建DDL觸發器1.3.3.嵌套觸發器1.3.4.遞歸觸發器1.4.管理觸發器1.觸發器 觸發器是一種特殊的存儲過程&#xff0c;與表緊密關聯。 1.1.DDL觸發器 當服務器或數據庫中發生數據定義語言&#xff…

主成分分析原理解釋(能力工場小馬哥)

主成分分析&#xff08;Principal components analysis&#xff09;-最大方差解釋 在這一篇之前的內容是《Factor Analysis》&#xff0c;由于非常理論&#xff0c;打算學完整個課程后再寫。在寫這篇之前&#xff0c;我閱讀了PCA、SVD和LDA。這幾個模型相近&#xff0c;卻都有自…