Güncel v6 yazı tipi ölçeği, duyarlı boşluklar, işlevsel renkler, bağlantılı doğrulama ve somut Frontend entegrasyonuyla GOV.UK tarzı bir soru yanıtlama ve cevapları kontrol etme akışı oluşturun.
OpenDesign Kılavuzu8 Bölüm37 başvuru girdisiÖzgün Uygulama Kılavuzu
01
GOV.UK tasarım sistemi Arayüz Önizlemesi
Boş alanlar gönderin, bağlantılı hataları izleyin, yanıtları düzeltin ve inceleme ekranından bir değeri düzenleyin. Hiçbir bilgi sayfadan ayrılmaz.
Etkinlik başvurusu: soru, doğrulama ve yanıtları kontrol etmeÖrneğin Tamamını Aç
Yerel olarak sunulan yerel GOV.UK Frontend 6.5.1 CSS, Button ve ErrorSummary JavaScript. Alternatif Helvetica yazı tipi; özgün, yalnızca yerel form doğrulaması ve inceleme gezintisi. · Uygulama başvurusu
02
GOV.UK tasarım sistemi Tasarım Referansı
GOV.UK Frontend 6.5.1 ve güncel v6 belgeleri, 3 Ekim 2026'da kontrol edildi. Onaltılık değerler bir referans anlık görüntüsüdür; üretimde adlandırılmış Sass işlevlerini tercih edin. Önizleme, alternatif yazı tipi ve bağımsız kimlikle resmî CSS ve JavaScript dosyalarının yerel kopyalarını yükler.
Bu referans, küçük ekranlarda daha büyük yazı tiplerini ve güncellenmiş işlevsel renkleri içeren v6 belgelerini kullanır. Bu nedenle eski bir ekran görüntüsünde farklı değerler görülebilir. Yukarıdaki tabloda sürümler birbirine karıştırılmadan, belgelenmiş güncel varsayılanlar yer alır.
Canlı çalışma, kurgusal bir topluluk etkinliği başvurusudur. Taç, GOV.UK logosu, Transport yazı tipi veya gerçek bir gönderim uç noktası kullanmaz. Görev içeriği ve yerel doğrulama kuralları uygulamaya özgüdür; bileşen yapısı ise bağlantı verilen resmî örneklere dayanır.
Uygun bir service.gov.uk hizmeti için GDS Transport, resmî uygulamanın parçasıdır. Diğer alan adlarındaki kamu hizmetleri başka bir yazı tipi kullanmalıdır. Bu bağımsız çalışma, önerilen Helvetica Neue, Helvetica, Arial, sans-serif alternatifini izler; yazı tipini değiştirmek sistemin hiyerarşisinden vazgeçmeyi gerektirmez.
Boyut ve satır yüksekliği çiftinin tamamını kullanın
Başvuru sorusu için govuk-heading-l, destekleyici metin için govuk-body kullanın. Dar ekranlarda başlık 27/30px, daha geniş ekranlarda 36/40px olur. v6'da gövde metni 19/25px olarak kalır. Küçük ekranlarda gövde metnini 16px kullanmak, bu referansı değil eski davranışı yansıtır.
Ölçek tablosu her iki boyutu da içerir; çünkü tek bir görünüm alanının ekran görüntüsü, duyarlı kuralı belirlemeye yetmez. Üretim CSS dosyası göreli birimler kullanır. govuk-heading-l gibi bir sınıf, anlamsal öğenin h1 mi yoksa h2 mi olması gerektiğini belirlemeden görünümü denetler.
scss
.app-question-note {
@include govuk-font($size: 19);
}
// Size and line-height only, without changing the font family:
.app-existing-font { @include govuk-font-size($size: 19); }
Birim 6, soru grupları arasındaki boşluk için kullanışlıdır: dar ekranda 20px, tablet eşiğinin üzerinde 30px verir. Statik govuk-spacing(6) yardımcısı her genişlikte 30px döndürür. İki sürüm masaüstünde aynı görünse bile yardımcıyı seçmek davranışı değiştirir.
Standart genişlik kapsayıcısının maksimum genişliği 1020px'tir. İçindeki üçte iki genişliğindeki ızgara sütunu, dış sayfa yapısının hizasını korurken soru akışını sınırlar. Dar ekran görünümü doğal biçimde alt alta dizilir. Önizlememizde her alanı bir gösterge paneli kartına yaymak yerine bu okuma hiyerarşisi korunur.
html
<div class="govuk-width-container">
<main class="govuk-main-wrapper" id="main-content">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Tell us about the event</h1>
<!-- Question form -->
</div>
</div>
</main>
</div>
Eski ekran görüntülerini eşleştirmek yerine rolleri kullanın
v6 işlevsel bağlantı rengi #1a65a6, hata rengi ise #ca3535 değerindedir. Gerçek bir Sass derlemesinde govuk-functional-colour("link") ve govuk-functional-colour("error") kullanın; böylece yükseltme, üst sürümün renk paletini uygulamaya aktarabilir. Bu işlevsel roller, genel bir kırmızı veya mavi illüstrasyon rengi seçmekten farklıdır.
Odak sarısı yalnızca odak durumu için ayrılmıştır. Varsayılan seçim rengine veya tanıtım vurgusuna dönüşmemelidir. Önizlemede sarı, koyu metin ve belirgin koyu bir kenarlıkla eşleştirilmiştir. Hata yalnızca kırmızıyla değil, metin ve yerleşimle belirtilir.
Giriş örneğinde govuk-form-group, govuk-label, govuk-hint ve govuk-input birlikte kullanılır. Etiket, girişin ID değerini hedefler; aria-describedby ise ipucuna işaret eder. Geçersiz durumda hata sınıflarına ek olarak hata mesajının ID değerini de ekleyin. Bu ilişki olmadan yalnızca görsel bir kırmızı kenarlık kullanmak, uygulamanın eksik olduğu anlamına gelir.
Bu başvuruda etkinlik adı ve iletişim e-postası birlikte yer alır. Bunlar tek bir kısa görevdeki ayrı etiketli değerlerdir; her alanın ayrı bir sayfaya konması gerektiği anlamına gelmez. Önizlemede yalnızca doğrulamayı göstermek için ikisi de zorunludur; gerçek bir izin gerekliliği belirlemez.
Sabit etiket: Etkinlik adı.
Sabit ipucu: Etkinlik bilgilerinizde yer alan adı kullanın.
Yerel işaretleme ile uygulama davranışının görevleri farklıdır
GOV.UK Frontend, bileşenleri biçimlendirir ve geliştirir. Bu hizmet için hangi e-posta adreslerinin kabul edilebilir olduğuna karar vermez, taslağı kaydetmez veya başvuruyu almaz. Önizlemede JavaScript iki alanı doğrular ve değerlerini yalnızca geçerli sayfada tutar. Sayfa yeniden yüklendiğinde çalışma verileri silinir.
Geçersiz bir Devam et işleminden sonra hata özetini formun önünde gösterin ve odağı özete taşıyın. Listedeki her bağlantı ilgili yanıtı hedefler. Tek metin alanı, girişin ID değerini hedefler; gruplanmış bir seçenek ise resmî yönergelerde açıklandığı gibi uygun ilk denetimi hedeflemelidir.
Yerel özet, geliştirme için data-module="govuk-error-summary" kullanır. Önizleme özeti yalnızca doğrulama başarısız olduğunda ekler, ardından yerel 6.5.1 modülünden ErrorSummary oluşturur. Kitaplık odak davranışını ve bağlantılı gezinmeyi yönetir; mesajları sağlamak, değerleri korumak ve artık geçerli olmayan hataları kaldırmak uygulamanın sorumluluğundadır.
Her iki alanı da boş bırakıp Devam et'i seçin. Etkinlik adı hatasını izleyin, kurmaca bir başlık girin, ardından geçersiz bir e-posta adresi yazın. Yeniden Devam et'i seçin: yalnızca devam eden hata gösterilmeli ve başlık korunmalıdır. Adresi düzeltip incelemeye geçin. Böylece kalıcı bir örnek hata göstermek yerine durum sözleşmesi açıkça görülür.
GOV.UK tasarım sistemi Yanıtları Kontrol Et ve Değiştir
Veri tablosu yerine tanım listesi kullanın
Yanıtları kontrol et ekranında govuk-summary-list bulunur. Her satırda bir dt anahtarı, bir dd değeri ve bir dd işlem alanı yer alır. Değiştir bağlantısından sonraki gizli etiket, ilgili yanıtı belirtir. Uzun etkinlik adları, düzenleme bağlantısını gizlemeden değer alanında satır kaydırır.
Değiştir işlemi formu geri yükler ve seçilen alana odaklanır. Devam edildiğinde doğrulama yeniden yapılır ve güncellenmiş inceleme ekranı açılır. Geri dönüş yolu uygulama kodudur; tasarım sistemi ise sunum yapısını sağlar.
Hiçbir hizmet bu verileri almadığı için bu çalışma inceleme ekranında biter. Gerçek bir Yanıtları kontrol et sayfasından önce gerçek gönderim işlemi gelmeli ve gönderilecek bilgiler gösterilmelidir. Beyanlar veya arka uç onayı içeren bir uygulama için ek hizmet mantığı gerekir; yeşil bir panel böyle bir sonuç oluşturamaz.
İki kurmaca yanıtı da doldurun ve incelemeye devam edin.
Etkinlik adını değiştir'i seçin; yalnızca bu yanıtı düzenleyin.
Devam edin ve düzeltilmiş başlığın yanı sıra e-postanın da korunduğunu doğrulayın.
Aşağıdaki kurulumda govuk-frontend@6 ve Node paket içe aktarıcılı Dart Sass kullanılır. Belgelenmiş markasız yazı tipi yapılandırması derlenir ve tarayıcı JavaScript dağıtımı kopyalanır. Gerçek bir projede tam sürümün kayda geçmesi için çözümlenmiş kilit dosyasını depoya ekleyin.
Örnekte Transport veya devlet görsel varlıkları yüklenmez. Markalı bir hizmet için uygun olması durumunda resmî varlıklar, belgelenmiş varlık yolu üzerinden ayrıca sunulmalıdır. Başka bir derleme aracı kullanan uygulamalar, paketlemeyi uyarlarken aynı Sass modülünü ve initAll giriş noktasını kullanabilir.
Bileşen işaretlemesi oluşturulduktan sonra başlatın
Bağımsız önizleme, yerel olarak kopyalanmış resmî CSS ve JavaScript dosyalarını 6.5.1 sürümünde kullanır. Dar kapsamlı bir yazı tipi geçersiz kılması, çalışma boyunca Transport yazı tipinin yerine geçer. Form doğrulaması ve inceleme ekranı uygulama kodudur; Button ve ErrorSummary geliştirmeleri ise kitaplıktan gelir. Ayrı Sass derleme tarifi, tercih edilen yapılandırılabilir kurulumu açıklar; bu derleme burada çalıştırılmamıştır.
Yerel bir uygulamada Frontend başlatması, özetin odak davranışını sağlar.
Canlı çalışma, başarısız her doğrulama özetini ekledikten sonra yeni bir ErrorSummary oluşturur; uygulama doğrulaması ayrı kalır.
Yanıtları kontrol et: anlamsal özet listesi
Tanım listesi, yanıt etiketini değeriyle ve yanıtı düzenlemeye yönlendiren bağlantıyla eşleştirir. Gizli sonek, yinelenen Değiştir bağlantılarının birbirinden ayırt edilmesini sağlar.
returnTo parametresi burada kullanılan bir uygulama geleneğidir; Frontend API değildir.
Düzenleme sonrasında incelemeye dönün ve diğer tüm yanıtları koruyun.
Eksiksiz bağımsız örnek
Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Event enquiry — OpenDesign component study</title><link rel="stylesheet" href="vendor/govuk-6.5.1/govuk-frontend.min.css"><style>
body{margin:0;background:#fff}body,body *,body *::before,body *::after{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}[hidden]{display:none!important}.study-header{border-bottom:1px solid #cecece;padding:15px 0;background:#f3f3f3}.study-header p{margin:0}.study-header strong{display:block;margin-bottom:5px}.study-note{border-top:1px solid #cecece;padding-top:20px;margin-top:30px}.study-actions{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}.govuk-summary-list__value{overflow-wrap:anywhere}main:focus,h1:focus{outline:none}.govuk-width-container{max-width:1020px}.study-tools{margin:20px 0}.study-tools button{font:inherit;background:none;border:0;padding:0;color:#1a65a6;text-decoration:underline;cursor:pointer}.study-tools button:focus{outline:3px solid #ffdd00;background:#ffdd00;color:#0b0c0c}.study-header .govuk-body-s{max-width:75ch}
</style></head><body class="govuk-template__body"><script>document.body.className+=' js-enabled'+('noModule' in HTMLScriptElement.prototype?' govuk-frontend-supported':'');</script>
<a class="govuk-skip-link" href="#main-content">Skip to main content</a>
<header class="study-header"><div class="govuk-width-container"><p class="govuk-body-s"><strong>OpenDesign · Component study</strong>GOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.</p></div></header>
<main class="govuk-width-container govuk-main-wrapper" id="main-content"><div class="govuk-grid-row"><div class="govuk-grid-column-two-thirds">
<section id="questions"><div id="errors"></div><h1 class="govuk-heading-l" id="question-title" tabindex="-1">Tell us about the event</h1><p class="govuk-body">Enter fictional details to try linked validation and the check-answers pattern.</p>
<form id="event-form" novalidate>
<div class="govuk-form-group" id="name-group"><label class="govuk-label" for="event-name">Event name</label><div class="govuk-hint" id="event-name-hint">Use the name shown on your event information.</div><input class="govuk-input" id="event-name" name="eventName" type="text" aria-describedby="event-name-hint"></div>
<div class="govuk-form-group" id="email-group"><label class="govuk-label" for="contact-email">Contact email</label><div class="govuk-hint" id="contact-email-hint">For example, [email protected]. Use a fictional address.</div><input class="govuk-input" id="contact-email" name="email" type="email" spellcheck="false" autocomplete="email" aria-describedby="contact-email-hint"></div>
<button class="govuk-button" data-module="govuk-button" type="submit">Continue to check answers</button>
</form><div class="study-tools govuk-body-s"><button id="fill" type="button">Use example details</button></div></section>
<section id="review" hidden><a class="govuk-back-link" href="#questions" id="back">Back</a><h1 class="govuk-heading-l govuk-!-margin-top-6" tabindex="-1" id="review-title">Check your answers</h1><dl class="govuk-summary-list"><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Event name</dt><dd class="govuk-summary-list__value" id="review-name"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#event-name" data-field="event-name">Change<span class="govuk-visually-hidden"> event name</span></a></dd></div><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Contact email</dt><dd class="govuk-summary-list__value" id="review-email"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#contact-email" data-field="contact-email">Change<span class="govuk-visually-hidden"> contact email</span></a></dd></div></dl><h2 class="govuk-heading-m">This example ends at review</h2><p class="govuk-body">Nothing has been submitted. Your answers stay in this page until it is reset or reloaded.</p><button class="govuk-button govuk-button--secondary" data-module="govuk-button" id="reset" type="button">Start again</button></section>
<aside class="study-note"><h2 class="govuk-heading-s">Try the recovery path</h2><ol class="govuk-list govuk-list--number"><li>Continue with empty fields to show the error summary.</li><li>Follow an error link, enter a title and an invalid email.</li><li>Correct the email, then change an answer from review.</li></ol><p class="govuk-body-s">Native component CSS and ErrorSummary behaviour. Local application logic only. No government logo, Transport font, external request or stored account.</p><p class="govuk-body-s"><a class="govuk-link" href="https://design-system.service.gov.uk/components/error-summary/" target="_blank" rel="noreferrer">Official error summary reference</a> · <a class="govuk-link" href="vendor/govuk-6.5.1/LICENSE.txt">Frontend licence</a></p></aside>
</div></div></main><script type="module">
import {initAll, ErrorSummary} from './vendor/govuk-6.5.1/govuk-frontend.min.js';
initAll();
const q=document.querySelector('#questions'),r=document.querySelector('#review'),form=document.querySelector('#event-form'),holder=document.querySelector('#errors');
const fields=[{id:'event-name',group:'name-group',empty:'Enter an event name'},{id:'contact-email',group:'email-group',empty:'Enter a contact email',invalid:'Enter an email address in the correct format, like [email protected]'}];
function clearErrors(){holder.replaceChildren();for(const f of fields){document.getElementById(f.group).classList.remove('govuk-form-group--error');const input=document.getElementById(f.id);input.classList.remove('govuk-input--error');input.removeAttribute('aria-invalid');input.setAttribute('aria-describedby',f.id+'-hint');document.getElementById(f.id+'-error')?.remove();}document.title='Event enquiry — OpenDesign component study';}
function edit(id='event-name'){r.hidden=true;q.hidden=false;document.getElementById(id).focus();}
form.addEventListener('submit',event=>{event.preventDefault();clearErrors();const errors=[];for(const f of fields){const input=document.getElementById(f.id);const value=input.value.trim();const message=!value?f.empty:(f.id==='contact-email'&&(!input.validity.valid||!value.includes('@'))?f.invalid:null);if(message){errors.push({id:f.id,message});document.getElementById(f.group).classList.add('govuk-form-group--error');input.classList.add('govuk-input--error');input.setAttribute('aria-invalid','true');input.setAttribute('aria-describedby',f.id+'-hint '+f.id+'-error');const p=document.createElement('p');p.id=f.id+'-error';p.className='govuk-error-message';const hidden=document.createElement('span');hidden.className='govuk-visually-hidden';hidden.textContent='Error: ';p.append(hidden,document.createTextNode(message));input.before(p);}}
if(errors.length){const summary=document.createElement('div');summary.className='govuk-error-summary';summary.dataset.module='govuk-error-summary';summary.innerHTML='<div role="alert"><h2 class="govuk-error-summary__title">There is a problem</h2><div class="govuk-error-summary__body"><ul class="govuk-list govuk-error-summary__list"></ul></div></div>';for(const err of errors){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+err.id;a.textContent=err.message;li.append(a);summary.querySelector('ul').append(li);}holder.append(summary);new ErrorSummary(summary);document.title='Error: Event enquiry — OpenDesign component study';return;}
document.getElementById('review-name').textContent=document.getElementById('event-name').value;document.getElementById('review-email').textContent=document.getElementById('contact-email').value;q.hidden=true;r.hidden=false;document.getElementById('review-title').focus();document.title='Check your answers — OpenDesign component study';});
document.querySelectorAll('.change').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();edit(a.dataset.field)}));document.getElementById('back').addEventListener('click',e=>{e.preventDefault();edit()});document.getElementById('fill').addEventListener('click',()=>{clearErrors();document.getElementById('event-name').value='Riverside community picnic';document.getElementById('contact-email').value='[email protected]';document.getElementById('event-name').focus()});document.getElementById('reset').addEventListener('click',()=>{form.reset();clearErrors();edit();document.getElementById('question-title').focus()});
</script></body></html>
Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur.
Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir.
04
GOV.UK tasarım sistemi AI Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
Kabuk komutlarını, app.scss içeriğini ve HTML parçalarını belirtilen konumlarına ayrı ayrı yerleştirin. Önizleme, yazı tipi geçersiz kılmasıyla yerel olarak kopyalanmış resmî 6.5.1 varlıklarını kullanır; bu Sass derleme tarifi belgelenmiştir ancak bu çalışma alanında derlenmemiştir. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP dosyası, önizlemenin tam bağımlılıklarını ve belgenin tamamını da içerir. Dosyaları çıkarın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın, ardından http://localhost:8080/gov-uk.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.
sh / scss / html
# Run in a project directory
npm install [email protected]
npm install --save-dev sass
mkdir -p public/assets
# Save the following as app.scss
@use "pkg:govuk-frontend" as * with (
$govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif)
);
# Compile, then copy the browser module
npx sass --pkg-importer=node app.scss public/assets/app.css
cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/
<!-- In the HTML head -->
<link rel="stylesheet" href="/assets/app.css">
<!-- At the start of body -->
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<!-- After the question / summary markup -->
<script type="module">
import { initAll } from '/assets/govuk-frontend.min.js';
initAll();
</script>
Projeniz İçin Bir İstem
Ajan İstemi
Bu kılavuzdaki GOV.UK Frontend v6'yı ve markasız Helvetica yazı tipi yapılandırmasını kullanarak iki alanlı etkinlik başvurusunu uygulayın. Gerçek form-group, input, error-summary ve summary-list yapılarını; bağlantılı satır içi hataları, korunan yanıtları, hedefli Değiştir bağlantılarını ve yalnızca incelemeyle tamamlanan akışı kullanın. Belgelenmiş duyarlı yazı tipi boyutu ve boşluklarını Frontend sınıflarıyla uygulayın. Gerçek proje kimliğini koruyun; resmî bir gönderim işlemi veya uydurma bir arka uç sonucu oluşturmayın. Boş, geçersiz e-posta, düzeltilmiş yanıt, inceleme ve yanıt değiştirme durumlarını doğrulayın.
05
GOV.UK tasarım sistemi Kaynaklar ve Kapsam
GOV.UK Frontend 6.5.1 bileşen CSS ve JavaScript kullanan bağımsız bir OpenDesign uygulama çalışmasıdır. Devlet logosu, Transport yazı tipi, resmî hizmet, gerçek gönderim veya uygunluk sertifikası ima edilmez. Form kuralları ve inceleme gezinmesi özgün uygulama kodudur.
