⑴ html—為文本框設置必填屬性
在input標簽內添加required屬性豎慧
即必須在填寫該文本余如答框之橡消後，才可以提交表單
⑵ 表單設置必填項和選填項
<formid="form">
<inputname="user"message="賬號"value=""/>
<inputname="name"value=""/>
<inputtype="button"onClick="checkStart()"value="save"/>
</form>
<script>
functioncheckStart(){
check(form);
}
functioncheck(form){
for(i=0;i<form.length;i++){
varele=form.elements[i];
varmsg=ele.getAttribute('message');
if(msg&&ele.value==""){
alert(msg+"不能為空!");
槐升喊form.elements[i].focus();
returnfalse;
}
}
form.submit();
}
我不知笑渣道你具體代碼 就是給的一個思路 在需要驗證的input 或者select 添加一個message的屬性
驗證的時候 檢查有屬性就判斷是否為空 提鉛野示用message的漢字 一般的name也是字母 提示別人看不懂
⑶ 如何在html網頁中設置文本框為必填並且只能填10個字元
<SCRIPTLANGUAGE=JavaScript<!--//functiontextCounter(field,countfield,maxlimit){//定義函數，傳入3個參數，分別為表單區的名字，表單域元素名，字元限制；if(field.value.lengthmaxlimit)/肢基/如果元素區字元數大於最大字元數，按照最簡飢彎大字元數截斷；field.value=field.value.substring(0,maxlimit);else//在記數區文本框內顯示剩餘的字元數；countfield.value=maxlimit-field.value.length;}//--</攔悶SCRIPT<formname=myformaction=<textareaname=messagewrap=physicalcols=28rows=4onKeyDown=textCounter(this.form.message,this.form.remLen,5);onKeyUp=textCounter(this.form.message,this.form.remLen,5);</textarea尚能輸入<inputreadonlytype=textname=remLensize=4maxlength=3value=5個字元</div</form給你段代碼自己看看吧
⑷ 如何將表單內容設置為必填
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<table width="500" border="0" align="center" cellpadding="4" cellspacing="1" bgcolor="#CCCCCC">
<form name="form" method="post" >
<tr bgcolor="#f9f9f9">
<td width="13%"弊慶 height="20" > <div align="right">姓名：</div></td>
<td width="53%" height="20"> <input type="text" name="name" id="name" class="write" size="20" maxLength=8>
*8個字內</td>
<script>
function showimage(){document.images.showimages.src="<%=imdeximg%>"+document.form.sex.options[document.form.sex.selectedIndex].value+""+document.form.img.options[document.form.img.selectedIndex].value+".gif";}
</script>
</tr>
<tr bgcolor="#f9f9f9">
<td height="20" align="right"> 性別： </td>
<td height="20"> <select name="sex" size="1" onChange="showimage()">
<option value="1">男</option>
<option value="0">女</option>
</select> </td>
</tr>
<tr bgcolor="#f9f9f9">
<td height="20" align="right">QQ：</td>
<td height="20"> <input name="qq" type="text" id="qq" size="35" maxLength=15 class="write">
*</td>
</tr>
<tr bgcolor="#f9f9f9">
<td height="指卜臘20" align="right">主頁： </td>
<td height="20"> <input name="web" type="text" value="http://" size="35" maxLength=50 class="write">
</td>
</tr>
<tr bgcolor="#f9f9f9">
<td height="20" align="right">來自：</td>
<td height="20"> <input name="come" type="text" id="come" size="35" class="write"></td>
</tr>
<tr bgcolor="#f9f9f9">
<td height="20" align="right">電子郵箱：</td>
<td height="20"><input name="email" type="text" value="" size="35" maxlength=50 class="write">
*</td>
</tr>
<tr bgcolor="#f9f9f9">
<td height="20" align="right">主題：</td>
<td height="20">
<唯滑input name="title" type="text" class="write" id="title" size="35" maxLength=10>
*
</td>
</tr>
<tr bgcolor="#f9f9f9">
<td align="right" valign="top"> 留言內容： </td>
<td> <textarea name="words" cols="50" rows="8" class="input1" id="words"
onKeyDown=gbcount(this.form.words,this.form.total,this.form.used,this.form.remain);
onKeyUp=gbcount(this.form.words,this.form.total,this.form.used,this.form.remain);></textarea>
* </td>
</tr>
<tr bgcolor="#f9f9f9">
<td align="right" valign="top" height="30"> </td>
<td height="30">最多字數： <INPUT disabled maxLength=4 name=total size=3 value=<%=txt%>>
已用字數：
<INPUT disabled maxLength=4 name=used size=3 value=0>
剩餘字數：
<INPUT disabled maxLength=4 name=remain size=3 value=<%=txt%>></td>
</tr>
<tr align="center" bgcolor="#EAEAEA">
<td height="20" colspan="2"> <input name='validatecode' type='text' size='5'> <img
src='/validatecode.asp' align='absmiddle' border='0'><br>
<br>
<input type="hidden" name="action_e" value="Add_New">
<input type="button" onclick="DoSave();" name="Submit" value=" 提 交 " class="input1"> <input type="reset" name="Submit2" value=" 重 寫 " class="input1">
</td></tr>
</form>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkForm(){
var name = document.getElementById('name');
if(name.value == ''){
alert("姓名不能為空");
return false;
}
return true;
}
function DoSave(){
if(checkForm()){
document.form.action = "<%=indexfilename%>";
document.form.submit();
}
}
//-->
</SCRIPT>
</BODY>
</HTML>
給你寫了一個,就是姓名不能空,如果其它的也要做這個判斷的話,你再把其它的都加上,如果不清楚,用網路hi我
⑸ 關於Web表單設計的經驗分享
表單在UI設計中的出現場景還是比較多的，尤其是在一些To B的產品設計中。最近自己有做大量web 表單設計，就想把自己學到的一些關於表單設計的知識點分享給大家～
一、什麼是表單？
表單在網頁中的主要功能是負責採集數據以及向伺服器傳送數據的。表單是採集用戶信息數據重要的途徑。好的表單設計能提升信息採集的效率與成功率。不好的表單設計會影響用戶心情，體驗差，導致信息採集不成功甚至帶來利益的損失。
二、表單的構成
表單通常由標簽、輸入域、操作按鈕、這三部分構成。
標簽
標簽我們可以把它理解為標題，告訴用戶該表單需要填寫什麼信息、該表單需要採集什麼內容。標簽通常出現在輸入域的左邊、頂部、或者輸入域內。
標簽按所填信息的必要性分為必填項和非必填項，一般我們會在必填項的標簽內容加上＊號。＊號的的擺放位置有下面兩種情況：
1.當標簽與輸入域居中對齊時，建議把＊號放在標簽左側。
因為＊號比較顯目，用戶往往第一眼會先看到它，然後按照用戶從左往右的閱讀習慣，視覺落點分別為文字標簽、輸入域。考慮到表單的填寫效率，＊號位於左側的表單閱讀起來會更加順暢。所以當標簽與輸入域居中對齊時，把＊號放在標簽左側會更好。
2.當標簽與輸入域左對齊時，建議把＊號放在標簽右側。
由於人們縱向的閱讀習慣，視線會成F型。＊號在左側還是在右側並不會對用戶視覺落腳點造成太多困擾，另外考慮到對齊的形式，＊號放在標簽右側會更好。
輸入域
輸入域是錄入用戶各種類型信息的重要交互區域。輸入域包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框、和文件上傳框等等。
不知道這些輸入域的區別的小夥伴可以去ant design官網學習一下，傳送門：
https://ant.design/components/overview-cn/
因為輸入域是錄入信息很重要的交互區域，在設計時我們應該考慮用戶輸入的多種場景去設計。我們可以將用戶的輸入過程分為輸入前、輸入中、輸入後。根據每一種場景中細化我們的設計。比如在輸入中：我們要考慮游標的設計、輸入文字信息的設計，信息提示等，在輸入後：我們要考慮信息輸入錯誤應該給予怎樣的視覺反饋等。總之考慮得越細致，越能提高信息錄入的成功率。
操作按鈕
操作按鈕是在用戶填寫完表單各項內容後，所要進行的操作動作，來完成或者結束當前操作流程。操作按鈕分為全局操作按鈕與局部操作按鈕。全局操作按鈕控制整個表單，比如提交、發送等操作按鈕。局部操作按鈕是對某一范圍的內容起作用，比如編輯、刪除操作。
三、表單設計常見問題
1.標簽採用哪種對齊方式更好？
在我們的實際項目中，通常會因為文案的長短不一，導致我們不知道該採用哪種對齊方式。標簽的處理原則就是要要盡量對齊，採用哪種對齊方式應考慮具體的制約因素和目標來定。
左對齊
當標簽採用左對齊的方式的時，因為文字標簽的長度不統一，導致標簽與輸入框的間距是不可控的。這就會造成設計的通用性不強，以及橫向空間的浪費。
如果採用左對齊的形式，就要盡量去保持文字標簽的長度一致，比如通過字距的調整讓文字標簽的長度保持一致或者通過留足留白空間，這樣設計上會更統一。以為例，採取左對齊形式，但是它留足了文字標簽與輸入域之間的距離，讓表單看上去更統一和諧，不足的就是造成了部分空間的浪費。
頂對齊
採用頂對齊的形式，會讓標簽和輸入域垂直顯示，縱向布局的信息呈現效果會更好，從而提高用戶填寫的效率。頂對齊因為垂直排布，會造成縱向空間的浪費，但在橫空間上比較節省，比較適用於橫向寬度較窄的頁面。
▵頂對齊
右對齊
右對齊跟左對齊一樣會因為標簽長度不可控。導致設計的通用性不強，以及橫向空間的浪費，但節約了縱向空間。
▵右對齊
在這幾種對齊方式中，用戶瀏覽信息的速率頂對齊>右對齊>左對齊。頂對齊形式適合簡易表單、右對齊與左對齊表單適合復雜表單。
2.操作按鈕應該用哪種設計形式比較好？
對於全局的操作按鈕會用常規的按鈕樣式，全局按鈕分為主按鈕與次按鈕。
主按鈕
主按鈕是界面中比較重要的功能操作按鈕，比如提交、保存等一些正向的操作。主按鈕在視覺層級上最高，能夠引導用戶很快的找到核心的操作並點擊。主按鈕通常是純文本或圖文結合的面性形式。圖文結合的形式能吸引用戶注意，也幫助用戶理解該按鈕的操作含義。
次按鈕
次按鈕的層級相對於主按鈕層級要弱一些，通常採用線性形式。在一個頁面中可以出現多個次按鈕。
對於局部操作按鈕的設計形式可以是文字按鈕、圖標按鈕，也可以是圖標＋文字的形式。至於應該應用哪種形式就要結合具體端場景去考慮。
圖標按鈕
圖標按鈕就是用圖標來代表該操作的含義，能夠直觀的表達按鈕的功能。在設計的時候我們需要注意圖標是易於理解的、是用戶熟悉的。圖標按鈕的設計通常都會配上懸浮框設計，也就是當用戶滑鼠停留在該圖標按鈕上會出現對該按鈕的文字釋義的懸浮框。以微信公眾號為例，當滑鼠停留在編輯圖標那時會出現黑色的懸浮框對其進行解釋，讓用戶理解此按鈕的意義，讓用戶放心操作。
在web設計中，由於按鈕的種類與使用場景比較多，建議局部的操作按鈕使用線性圖標，讓它的層級相對其他按鈕要弱化一些。
文字按鈕
文字按鈕通常出現在列表的操作項中。文字的顏色通常是品牌色或者藍色，因為藍色在用戶的認知中通常是可點擊的。
圖標＋文字 按鈕
圖文結合的按鈕相對於純文字按鈕會更加直觀，也能更吸引用戶注意。
3.輸入框應該設計幾種狀態？
考慮的狀態越多，設計就會越細，能夠及時的反饋信息給用戶，從而提高表單填寫效率。在考慮輸入框的設計狀態時，遵循及時反饋的設計原則去考慮。
為了避免用戶填寫完所有信息後，才反饋有錯誤，會造成時間浪費，表單填寫效率低。通常會把輸入框線變成紅色，同時出現紅色的說明文案，來引起用戶的注意。
▵及時反饋錯誤信息
在設計中我們還需要考慮自動校驗的成功與警告狀態。顏色通常為綠色與橙色。
輸入框到底應該設計幾種狀態我們也需要根據我們表單的復雜情況去考慮，對於簡單的表單設計過於細化的狀態是沒有必要的。
寫在最後的話
表單設計看起來簡單，但實際在設計過程中還是有大量的點值得我們去學習與研究的。在這次做表單的過程中，覺得作為設計師我們不應該去挑活，不要覺得表單設計是一個很小的設計就不動腦的照著別人的設計規范抄一遍。像這種看似枯燥但又很重要的模塊設計，我們在前期開始設計之前可以從交互層去考慮，再從視覺層面去考慮怎樣的表單設計能讓用戶填得舒心又高效。在看別人的設計規范比如ant design的組件規范時，我們可以去留意他們的設計細節，比如表單上下之間的間距留的是多少？有什麼規律嗎？按鈕的上下邊距與左右邊距有什麼關系嗎？通過這些思考，然後去觀察總結，並轉化為自己的小技巧，到下一次設計表單的時候，我們就會做得很好了。
往期解析
UI設計－首頁解析
詳情頁設計技法解析
輕松get文字標簽設計技法
Get點9切圖方法（內附切圖神器）
⑹ web表單有哪些基本屬性
web表單有哪些基本屬性：1、數據填報，可作為獨立的功能模塊，用於管理業務流程、匯總採集數據，以及開發各類數據報送系統，因此，對於報表工具而言，其典型場景之一就是利用報表模板填報錄入各種業務數據。
2、通過嵌入 SpreadJS 純前端表格控制項，企業可有效應對數據填報的各類技術難點，迅速搭建出具備 Excel 填報模式、公式函數、許可權控制和數據校驗的在線填報系統，因此業務人員無需專門培訓，即可上手使用。
⑺ html添加了哪些表單元素和屬性
html5 新增了的表單元素和屬性如下：
屬性：
1、 form屬性
在HTML5中表單元素可放在表單之外，通過給該元素添加form屬性即可。
2、 formaction屬性
HTML5給提交按鈕(如button、submit、image等)增加了formaction屬性，以便提交到不同的伺服器地址
3、formmethod屬性
既然對提交按鈕有了formaction屬性，就相應的有了formmethod屬性
4、 placeholder屬性
給文本框(text或textarea)處於未輸入狀態時的一種文字提示
5、autofocus屬性
自動獲得焦點，一個頁面只能有一個控制項具有該屬性
6、 list屬性
HTML5為單行文本框增加了一個list屬性，沒吵首該屬性的值為某個datalist元素的id，增加該屬性後的單行文本框類似選擇框(select)，但允許用戶自定義輸入，為了避免沒有支持該蒜素的瀏覽器出現錯誤，我們通常使用CSS設置不顯示
6、autocomplete屬枯數性
自動完成允許瀏覽器預測對欄位的輸入，在HTML5之前自動完成不能自定義設置，任何人都可以看到，所以存在安全隱患，在HTML5中可以通過此屬性來指定「on」、」off「或「」(不指定)三種，不指定時使用瀏覽器的默認值，這取決於各瀏覽器的決定。
元素：
HTML5大幅度地增加和改良了input元素的種類
search 與text文本框類似，用於搜索；
tel 與text文本框類似，用於電話；
url 與text文本框類似，用於url格式的地址；
email 與text文本框類似，用於email格式的地址；
number 與text文本框類似，用於數值；
range 只允許輸入一段范圍內的數值，通過min和max屬性來設置范圍；
color 顏色文本框，「#000000」格式的文字；
file 文件選擇文本框，HTML5中通過multiple屬性可以多選；
datetime、date、month、week、time、datetime-local 各種日期與時間輸入的文本框；
output 定義不碰正同類型的輸出；
表單驗證
自動驗證
所謂自動驗證，就是通過為元素添加相應的屬性來達到驗證的要求
1、 required屬性
具有該屬性的元素，如果其內容為空則不允許提交，並給出相應的提示
2、pattern屬性
具有該屬性的元素，如果內容不為空則把內容與pattern的值進行正則匹配，匹配不成功則不通過並提示
3、min屬性和max屬性
它們是值類型和日期類型的input元素專用屬性，限制了輸入的范圍
4、 step屬性
控制元素的值增加或減少的步幅，如輸入11-100之間的數字，且步幅是5，那麼只能輸入11、16、21....
顯示驗證
除了給元素添加屬性來自動驗證外，在HTML5中，form元素與輸入元素(input)包括select元素和textarea都具有一個checkValidity方法，調用該方法可以進行手動驗證，checkValidity方法以boolean的形式返回驗證結果。
取消驗證
取消表單驗證有兩個屬性：用於form的novalidate和用於submit的formnovalidate：
自定義錯誤
在HTML5中沒經過驗證的表單瀏覽器會有默認的提示，但也提供了通過JavaScript的來設置自定義錯誤提示信息
增強的頁面元素
1、figure元素
figure是個組合元素，可以帶標題figcaption，一個figure只允許放置一個figcaption
2、details元素
details提供了一種替代Javascript的、將畫面上局部區域進行展開或收縮的方法
3 、mark元素
mark元素表示頁面需要突出顯示或高亮顯示的部分，經典的是搜索結果
4、progress元素
可以給progress設置value和max屬性，value表示已經進行的，max表示總數，value和max只能為有效的浮點數，value必須大於0小於等於max。如果不給progress設置這兩個屬性，則是動態顯示正在進行，進度不確定。
5、 meter元素
定義度量衡
6、改良的ol列表
在HTML5中為ol元素添加了start屬性和reversed屬性
7、改良的dl列表
dl是專門用來定義術語的列表，在HTML5中為dt增加了名字dfn
8、 另外還有cite用於表示作者，small用於標識「小型文本」等