web前端----html表單操做

時間 2019-12-20

標籤 web 前端 html 表單欄目 HTML 简体版

原文原文鏈接

form表單

功能：表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互javascript

表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。css

表單還能夠包含textarea、select、fieldset和 label標籤。html

表單屬性java

action: 表單提交到哪.通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理，好比https://www.sogou.com/webweb

method: 表單的提交方式 post/get默認取值就是get數據庫

注意啦！！！！編程

from表單：實現用戶與web服務器的交互
以鍵值對的形式發過去{"":"haiyan","":"123"}
若是沒有name屬性，你的數據是不過去的
name:鍵名


請求server端的方式：
    get:請求會放在url後面 username=yaun&password =123
    post:請求會放在請求體裏

    
關於 url的內容    
    url: https://www.baidu.com(協議：域名（也是ip+端口))
    url: http:127.0.0.1:8800/blog/addBlog（協議：ip:端口/）
    url: http:127.0.0.1:8800/blog/addBlog？username = yuan


    http:協議
    127.0.0.1:8800：ip地址與端口
    blog/addBlog：url的路徑（path）
    username = yuan:get請求數據

請求協議：
    瀏覽器發給服務器（get請求,post請求）
    格式：
        請求首行
        請求頭：就是一組組鍵值對
        換行 \n,\n\r
        請求數據：有兩種方式
        if get :
            url?data
        if post :
            請求數據
            
        get請求：安全性差，數據量有限（當設計到查詢的時候會用到get請求）
        那些是get請求（通常都是查詢數據庫操做）：
            1.url訪問server端
            2.超連接訪問，即a標籤
        post請求：相對於get安全點，，可是沒有絕對的安全（修刪改能夠用post）
        
相應協議：

表單元素瀏覽器

基本概念：
HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。
表單通常用來收集用戶的輸入信息
表單工做原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息安全

<input>系列標籤服務器

'''
<1> 表單類型

 　　text 文本輸入框
　　　　　　  value：設置默認值  
　　　　　　　placeholder:設置佔位內容

 　　password 密碼輸入框

 　　radio 單選框

 　　checkbox 多選框  

 　　submit 提交按鈕
 
 　　Reset 重置按鈕           

 　　button 按鈕(須要配合js使用.) button和submit的區別？

 　　file 提交文件：form表單須要加上屬性method = "post"   enctype="multipart/form-data" 
            
  　　上傳文件注意兩點：
　　　　　1.請求方式必須是post
　　　　　2.enctype="multipart/form-data"


<2> 表單屬性

　　name:表單提交項的鍵.

         注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；
         而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客戶端編程，而在css和javascript中使用的

　　value: 表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣：

　　type:輸入類型
        type="button", "reset", "submit" - 定義按鈕上的顯示的文本
                 
        type="text", "password", "hidden" - 定義輸入字段的初始值
                 
        type="checkbox", "radio", "image" - 定義與輸入相關聯的值

　默認選擇：　
　　checked:  radio 和 checkbox 默認被選中

　　readonly: 只讀. text 和 password

　　disabled: 對所用input都好使.

'''

select標籤

'''
 <select> 下拉選標籤屬性
          name:表單提交項的鍵.
          size：選項個數
          multiple：multiple 
                 <optgroup>爲每一項加上分組
                 <option> 下拉選中的每一項 屬性：
                       value:表單提交項的值.   
                       selected: selected下拉選默認被選中

'''

<textarea> 多行文本框

‘’''

<form id="form1" name="form1" method="post" action="">
        <textarea cols=「寬度」 rows=「高度」 name=「名稱」>
                   默認內容
        </textarea>
</form>

'''

<label>標籤

定義：<label> 標籤爲 input 元素定義標註（標記）。
說明：
1 label 元素不會向用戶呈現任何特殊效果。
2 <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

'''

<form method="post" action="">

        <label for=「username」>用戶名</label>
        <input type=「text」 name=「username」 id=「username」 size=「20」 />
</form>

'''

<fieldset>標籤

'''

<fieldset>
    <legend>登陸吧</legend>
    <input type="text">
</fieldset>

'''

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊頁面</title>
</head>
<body>
<h3>註冊頁面</h3>
<!--action放的是ip地址和端口-->
<!--method放的是請求方式-->
<form action="" method="post">
    <hr size="5" color="red">表單中input系列
    <label for="c1"> <!--label標籤就是把下面的姓名關聯起來-->
         <p>姓名：<input type="text" name="username" id="c1"></p>
    </label>
    <!--#當你不輸入的時候有個默認的value值-->
    <p>密碼：<input type="password" name="password" value="123"></p>
    <!--單選框ridio-->
    <p>性別：<input type="radio" name = gender value="male">男：<input type="radio" name="gender" value="female">女</p>
    <!--複選框checkbox-->
    <p>愛好：<input type="checkbox" name="hobby" value="basketball">籃球<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" value="sport">運動</p>
    <!--文件-->
    <p>頭像：<input type="file" name="fileobj"></p>
    <hr size="5" color="red">上面的value和下面的value是不同的，上面的是發送請求的，下面的是修改值的
    <!--重置-->
    <p><input type="reset" value="reset"></p>
     <!--實際上是submit按鈕把數據提交到action指定的地址了-->
    <p><input type="submit"></p>
    <!--空按鈕  當你輸入值纔有內容-->
    <!--onclick：鼠標點擊事件-->
    <p><input type="button" value="按鈕" onclick="alert('肯定')"></p>
    <!--onmouseover：鼠標指到上面就觸發-->
    <p><input type="button" value="按鈕" onmouseover="alert('肯定')"></p>
    <!--隱藏：不想讓用戶看見-->
    <p><input type="hidden" name="sss" value="sds"></p>
    <!--文本域-->
    <p>我的簡歷<br>
        <textarea name="selfinfo" cols="30" rows="10"></textarea>
    </p>
    <fieldset>海燕啊啊啊啊啊啊啊</fieldset>
    <!--下拉框-->
    <hr size="5" color="red">表單中select系列
    <select name="provice" size="5"  multiple="multiple" >
        selected設置默認選擇。若是select裏有multiple屬性，那麼能夠在option裏面設置多個selected
        <option value="hebei" selected="selected">甘肅省</option>
        <option value="henan" selected="selected">河南省</option>
        <option value="hebei">湖北省</option>
        <option value="shanxi">陝西省</option>
    </select>
    <fieldset>
        <legend>登陸吧</legend>
        <input type="text">
    </fieldset>

</form>
<!--以鍵值對的形式發過去{"":"haiyan","":"123","gender":"male","hobby":["basketball","football"],"fileobj":"fileobj"}-->
<!--若是沒有name屬性，你的數據是發不過去的-->
<!--name:鍵名-->
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。